欢迎点击「算法与编程之美」↑关注我们！
本文首发于微信公众号："算法与编程之美"，欢迎关注，及时了解更多此系列文章。
欢迎加入团队圈子！与作者面对面！直接点击！
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 团队
微信号：算法与编程之美
长按识别二维码关注我们!
温馨提示：点击页面右下角“写留言”发表评论，期待您的参与！期待您的转发！