聊一聊 bootstrap 的轮播图插件
2023-09-27 14:21:58 时间
今天做工作的时候,轻车熟路的做完,又用到了bootstrap的轮播图,觉得有必要安利一下这个插件,如果你需要的轮播图。功能不需要太炫酷,那么bootstrap的插件是你的首要选择。
使用方式
引入js和css
直接引入bootsrap.js和bootstrap.css两个文件即可。
示例html代码
<div id="myCarousel" class="carousel slide"> <!-- 轮播(Carousel)指标 --> <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> <!-- 轮播(Carousel)项目 --> <div class="carousel-inner"> <div class="item active"> <img src="/wp-content/uploads/2014/07/slide1.png" alt="First slide"> <div class="carousel-caption">标题 1</div> </div> <div class="item"> <img src="/wp-content/uploads/2014/07/slide2.png" alt="Second slide"> <div class="carousel-caption">标题 2</div> </div> <div class="item"> <img src="/wp-content/uploads/2014/07/slide3.png" alt="Third slide"> <div class="carousel-caption">标题 3</div> </div> </div> <!-- 轮播(Carousel)导航 --> <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div>
上面的示例代码从菜鸟教程直接copy过来的。根据需要酌情删减。
js初始化
$('.carousel').carousel()
carousel里面有一些选项,可以进行设置。
interval:轮播的间隔时间,默认值5000
pause:何时暂停,默认值hover,鼠标悬浮上去,则暂停。值改为null,意味着无论怎样都不暂停。
wrap:轮播是否连环,默认为true。
keyboard:是否相应键盘操作,默认为true。
一些方法事件
//轮播事件为200
$('#identifier').carousel({
interval: 2000
})
//从左到右循环轮播
$('#identifier').carousel('cycle')
//停止轮播
$('#identifier').carousel('pause')
//轮播到某一帧
$('#identifier').carousel(0)
$('#identifier').carousel(1)
//轮播到上一个项目
$('#identifier').carousel('prev')
//轮播到下一个项目
$('#identifier').carousel('next')
回调函数
//滑动时出发的回调
$('#identifier').on('slide.bs.carousel', function () {
// 执行一些动作...
})
//完成滑动过渡效果后,触发的事件
$('#identifier').on('slid.bs.carousel', function () {
// 执行一些动作...
})
自己使用例子
搞一个点击哪里,跳转哪里的东西
var car = $(".carousel");
car.carousel('pause');
$("#firstLi").bind("click", function() {
car.carousel(0);
car.carousel('pause');
});
$("#secondLi").bind("click", function() {
car.carousel(1);
car.carousel('pause');
});
有什么好处
先说一下swiper插件,他确实好用,功能强大,但是不支持ie8。支持ie8的版本swiper2不支持自动调整高度的功能。
owl-carousel支持自动调整高度,支持ie8.但是他在ie8下会有个闪烁的问题,这个官网也存在此问题,是个bug。
最终bootstrap的轮播图最为好使。
相关文章
- OpenHarmony移植案例与原理:如何适配服务启动引导部件bootstrap_lite
- OpenHarmony移植案例:如何适配服务启动引导部件bootstrap_lite
- bootstrap-model-弹出框背景禁止点击
- Bootstrap表单布局样式
- bootstrap图片轮播
- 基于bootstrap的上传插件fileinput实现ajax异步上传功能(支持多文件上传预览拖拽)
- 基于Bootstrap简单实用的tags标签插件
- 玩转Bootstrap(JS插件篇)-第1章 模态弹出框 :1-4 模态弹出框--结构分析
- 后端小白的Bootstrap笔记(一)
- bootstrap+jquery+ajax跨域实现短信验证码登录
- 【笔记】《Bootstrap实战》——第3章 WordPress主题【自】
- JS组件系列——表格组件神器:bootstrap table
- Bootstrap table的一些简单使用总结
- OneUI极强的 Bootstrap 管理仪表板模板
- tips:解决bootstrap-switch 在jqgrid中动态加载不显示的问题
- 已解决frozen importlib._bootstrap“, line 2 in _call_with_frames_removed ImportError: DLL lo
- Angular学习笔记【ngx-bootstrap】中的 tabset
- springboot bootstrap和thymeleaf的使用