创建bootstrap carousel的方法

2024年4月1日 198次阅读 来源: 1000copy

bootstrap提供了一个carousel（旋转木马）组件，我们称之为轮播。它可以轮播图片和文字，常常用来展示网站的关键信息。如下就是一个carousel：

[carousel demo](https://jsfiddle.net/1000copy/29r1fg71/)

代码如下：

<div id="myCarousel" class="carousel slide" data-ride="carousel">
    <!-- Carousel indicators -->
    <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
    </ol>   
    <!-- Wrapper for carousel items -->
    <div class="carousel-inner">
        <div class="item active">
            <img src="http://placehold.it/1000x150" alt="First Slide">
        </div>
        <div class="item">
            <img src="http://placehold.it/1000x150" alt="Second Slide">
        </div>
        <div class="item">
            <img src="http://placehold.it/1000x150" alt="Third Slide">
        </div>
    </div>
    <!-- Carousel controls -->
    <a class="carousel-control left" href="#myCarousel" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left"></span>
    </a>
    <a class="carousel-control right" href="#myCarousel" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right"></span>
    </a>
</div>

解释

任何一个轮播，都需要通过class来标识，使用carousel符号指明它的类型。标识选用的标签是div。这是一个惯例而已，实际上，其他的块标签可以Ok的，比如nav、section。

值得一说的是类slide，它在css中没有定义，而是在carousel.js内使用的，这个js文件发现如果一个carousel有slide的类的话，就是平滑的播放，否则就是直接用下一个轮播项直接的生硬的替代前一个轮播项目。

carousel组件可以由轮播指示器、轮播控件、轮播内容构成。

-轮播 carousel
----轮播指示器 indicators
-------轮播指示器 indicator
----轮播内容 inner
-------轮播项目 item
----轮播控件 controls
-------轮播控件 control

轮播内容需要使用carousel-inner在class内标识。在其内可以放置一组内容，内容常常标题和图片。

轮播指示器使用carousel-indicators在class属性内标识。轮播内容有几组，指示器就可以有几个li元素。li元素上的两个属性，data-target此指示器相关的carousel。就是说，如果一个页面有多个carousel，那么这个data-target就可以区别它们。属性data-slide-to指明当前的li指向轮播内容的按次序的画面。数字0表示第一幅，数字1表示第二幅，以此类推。

稍微停顿的看看，有趣的发现就是这段代码中有不少data-前缀的属性，比如data-target、data-slide-to。只是一个惯例，有jquery引入的。jquery有提供一个.data()的函数，可以使用

$.data("xxx")

访问

<some-element data-xxx="1">

中的data-xxx的值。这个惯例非常方便，并且在标签使用上具备一致性，因此被广泛采用。如今html也提供了类似的api访问它。不仅仅是carousel控件，还有很多控件也会这样使用的。看到这些属性就可以知道该控件不仅仅依赖bootstrap.css，也还需要依赖bootstrap.js ,jquery.js 。记得添加链接到html内：

https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css
https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js

轮播内容由carousel-inner在class属性内标识。在其标签内嵌的标签中为轮播条目，由item类标识。其中的当前显示项使用active标识。

标识、标识、标识。我提到了那么多的标识，是因为bootstrap就是一个声明式的框架，只要声明就好，背后的魔术是可以不需要开发者关心的，所谓的声明，其中一大部分就是做大量的标识。

轮播内容中的img，指向的是http://placehold.it/的内容，这是一个可以自动生成指定大小图片的网站，用来演示非常方便。此url后跟着的参数就是宽度X高度。

最后就是控件，用来操作轮播的翻页，翻页键需要carousel-control标识，并且可以选择left和right的类加入，用于标识向左翻页还是向右翻页。

参考：

http://ejohn.org/blog/html-5-data-attributes/
https://placehold.it/
http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-carousel.php

关于

作者：刘传君
创建过产品，创过业。不好动，读书机器。
可以通过 1000copy#gmail.com 联系到我

出品

http小书 http://www.ituring.com.cn/boo…
Git小书 http://www.ituring.com.cn/boo…

    原文作者：1000copy
    原文地址: https://segmentfault.com/a/1190000006723742
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞