Bootstrap 轮播(Carousel)插件
bootstrap 轮播(carousel)插件是一种灵活的响应式的向站点添加滑块的方式。除此之外,内容也是足够灵活的,可以是图像、内嵌框架、视频或者其他您想要放置的任何类型的内容。
如果您想要单独引用该插件的功能,那么您需要引用 carousel.js。或者,正如 bootstrap 插件概览 一章中所提到,您可以引用 bootstrap.js 或压缩版的 bootstrap.min.js。
下面是一个简单的幻灯片,使用 bootstrap 轮播(carousel)插件显示了一个循环播放元素的通用组件。为了实现轮播,您只需要添加带有该标记的代码即可。不需要使用 data 属性,只需要简单的基于 class 的开发即可。
<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> <div class="item"> <img src="/wp-content/uploads/2014/07/slide2.png" alt="second slide"> </div> <div class="item"> <img src="/wp-content/uploads/2014/07/slide3.png" alt="third slide"> </div> </div> <!-- 轮播(carousel)导航 --> <a class="carousel-control left" href="#mycarousel" data-slide="prev">‹ </a> <a class="carousel-control right" href="#mycarousel" data-slide="next">› </a> </div>
另外关于carousel组件不能自动播放的问题,这里要注意几个问题:
1、首先注意的部分是data-ride="carousel"
默认使用bootstrap的carousel组件,只需要加上 data-ride="carousel" 就可以实现自动播放了。无需使用初始化的js函数。所以,如果carousel不会自动播放,那么首先检查这个部分。这里还能加其他参数,比如是设置图片轮转的时间间隔。
代码:
<div id="mycarousel" class="carousel slide" data-ride="carousel" data-interval="2000">
2、其实还有手动初始化carousel组件的方法
这个方法在bootstrap 2.x就在使用,当 data-ride="carousel" 这个方法不管用的时候,可以手动初始化一下。代码如下:
$('#mycarousel').carousel();
如果还想控制图片轮转的时间间隔,还有参数:
$(function(){ $('#mycarousel').carousel({ interval: 3000 }); });
如果设置不自动播放,还可以:
$('#mycarousel').carousel({ pause: true, interval: false });
以上所述是小编给大家介绍的bootstrap 轮播(carousel)插件,希望对大家有所帮助
上一篇: 古代粮食不够吃 古人为什么不去开垦荒地
推荐阅读
-
bootstrap datetimepicker 日期插件在火狐下出现一条报错信息的原因分析及解决办法
-
bootstrap中日历范围选择插件daterangepicker的使用详解
-
bootstrap3使用bootstrap datetimepicker日期插件
-
bootstrap suggest搜索建议插件使用详解
-
BootStrap中jQuery插件Carousel实现轮播广告效果
-
vue中引用swiper轮播插件的教程详解
-
jquery图片轮播插件仿支付宝2013版全屏图片幻灯片
-
bootstrap上传图片插件(bootstrap图片大小设置方法)
-
Bootstrap插件设计之Tooltip插件解析
-
Bootstrap轮播图的使用和理解4