创建bootstrap carousel的方法

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
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞