聊一聊 bootstrap 的轮播图插件

网友投稿 721 2022-05-29

今天做工作的时候,轻车熟路的做完,又用到了bootstrap的轮播图,觉得有必要安利一下这个插件,如果你需要的轮播图。功能不需要太炫酷,那么bootstrap的插件是你的首要选择。

使用方式

直接引入bootsrap.js和bootstrap.css两个文件即可。

上面的示例代码从菜鸟教程直接copy过来的。根据需要酌情删减。

$('.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的轮播图最为好使。

Bootstrap

版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:#化鲲为鹏,我有话说#使用华为云鲲鹏弹性云服务器部署文字识别Tesseract
下一篇:放弃不切实际的幻想吧,list 就一定比 vector 插的快?
相关文章