欢迎点击「算法与编程之美」↑关注我们！

本文首发于微信公众号："算法与编程之美"，欢迎关注，及时了解更多此系列文章。

欢迎加入团队圈子！与作者面对面！直接点击！

1.Bootstrap轮播（Carousel）插件

Bootstrap 轮播（Carousel）插件是一种灵活的响应式的向站点添加滑块的方式。除此之外，内容也是足够灵活的，可以是图像、内嵌框架、视频或者其他您想要放置的任何类型的内容。要使用Bootstrap，需要先引入Bootstrap的相关文件。

图1.1 引入Bootstrap的相关文件

2.轮播图三要素：小圆圈、图片、左右按钮

图1.2 轮播图代码

3.轮播图组件注解

（1）data-ride=”carousel”:触发轮播动作，实现自动播放，用于标记轮播在页面加载时就开始动画播放

（2）data-intarval=”1000”:表示播放的时间间隔，单位毫秒，默认值5000

（3）data-wrap=”true”:表示循环播放，如果是false会停止到最后一张

（4）data-pause=”hover”:表示暂停（默认），鼠标移上去暂停到当前幻灯片，还有false属性

（5）class="carousel-indicators":圆点样式，直接使用，Bootstrap组件

（6）data-target：指向事件的目标，即要触发的元素

（7）data-slide-to：向轮播传递一个滑动索引，把滑块移动到一个特定的索引，从0开始计数

（8）data-slide：接受关键字prev或next，用来改变幻灯片的位置

（9）class="left carousel-control" 表示用左边修饰的class

（10）class="glyphicon glyphicon-chevron-left" 表示左箭头

（11）role="button"将a元素转换为button按钮功能进行使用

（12）aria-hidden="true" 图标的可访问性,避免混淆的输出内容，图标没必要被类似屏幕阅读器的设备访问，hidden就是对其隐藏

（13）class="sr-only"主要用于增强可访问性，能保证屏幕阅读器正确读取且不会影响 UI的视觉呈现

（14）图片上的div加上相应的class名字，直接调用bootstrap组件，有相应的js代码和css代码，可以直接触发执行。

END

主 编 | 王文星

责 编 | 朱 佳

where2go 团队

---

微信号：算法与编程之美

长按识别二维码关注我们!

温馨提示：点击页面右下角“写留言”发表评论，期待您的参与！期待您的转发！