首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >前端|Bootstrap 实例 - 简单的轮播插件

前端|Bootstrap 实例 - 简单的轮播插件

作者头像
算法与编程之美
发布2020-05-29 14:51:39
3.8K0
发布2020-05-29 14:51:39
举报

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

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代码,可以直接触发执行。

本文参与 腾讯云自媒体分享计划,分享自微信公众号。
原始发表:2020-05-27,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 算法与编程之美 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档