Bootstrap 轮播(Carousel)插件


Posted in Javascript onDecember 26, 2016

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)插件,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
一些实用的jQuery代码片段收集
Jul 12 Javascript
基于jQuery的动态增删改查表格信息,可左键/右键提示(原创自Zjmainstay)
Jul 31 Javascript
javascript闭包的高级使用方法实例
Jul 04 Javascript
js、css、img等浏览器缓存问题的2种解决方案
Oct 23 Javascript
在页面上用action传递参数到后台出现乱码的解决方法
Dec 31 Javascript
js判断鼠标位置是否在某个div中的方法
Feb 26 Javascript
js实现漫天星星效果
Jan 19 Javascript
vue使用jsonp抓取qq音乐数据的方法
Jun 21 Javascript
Vue-router 切换组件页面时进入进出动画方法
Sep 01 Javascript
Vue.js实现备忘录功能
Jun 26 Javascript
15 分钟掌握vue-next响应式原理
Oct 13 Javascript
详解Vue3中对VDOM的改进
Apr 23 Javascript
基于ajax与msmq技术的消息推送功能实现代码
Dec 26 #Javascript
Bootstrap源码解读标签、徽章、缩略图和警示框(8)
Dec 26 #Javascript
js正则表达式惰性匹配和贪婪匹配用法分析
Dec 26 #Javascript
Bootstrap的modal拖动效果
Dec 25 #Javascript
原生ajax处理json格式数据的实例代码
Dec 25 #Javascript
JS异步文件分片断点上传的实现思路
Dec 25 #Javascript
BootStrop前端框架入门教程详解
Dec 25 #Javascript
You might like
第十一节 重载 [11]
2006/10/09 PHP
浅谈php安全性需要注意的几点事项
2014/07/17 PHP
分享一则PHP定义函数代码
2015/02/26 PHP
教你在header中隐藏php的版本信息
2016/08/10 PHP
fancybox modal的完美解决(右上的X)
2012/10/30 Javascript
分享Javascript中最常用的55个经典小技巧
2013/11/29 Javascript
JS的参数传递示例介绍
2014/02/08 Javascript
javascript引用赋值(地址传值)用法实例
2015/01/13 Javascript
JS模拟按钮点击功能的方法
2015/12/22 Javascript
JavaScript中的冒泡排序法
2016/08/03 Javascript
微信小程序实战之顶部导航栏(选项卡)(1)
2020/06/19 Javascript
angularjs 获取默认选中的单选按钮的value方法
2018/02/28 Javascript
jQuery实现适用于移动端的跑马灯抽奖特效示例
2019/01/18 jQuery
JS插件amCharts实现绘制柱形图默认显示数值功能示例
2019/11/26 Javascript
node.js中path路径模块的使用方法实例分析
2020/02/13 Javascript
VUE : vue-cli中去掉路由中的井号#操作
2020/09/04 Javascript
[01:00]选手抵达华西村 整装待发备战2016国际邀请赛中国区预选赛
2016/06/25 DOTA
python中执行shell命令的几个方法小结
2014/09/18 Python
Python操作串口的方法
2015/06/17 Python
python 链接和操作 memcache方法
2017/03/04 Python
利用Python写一个爬妹子的爬虫
2018/06/08 Python
简单谈谈python基本数据类型
2018/09/26 Python
python threading和multiprocessing模块基本用法实例分析
2019/07/25 Python
Python提取视频中图片的示例(按帧、按秒)
2020/10/22 Python
Python list和str互转的实现示例
2020/11/16 Python
丝芙兰新加坡官网:Sephora新加坡
2018/12/04 全球购物
TheFork葡萄牙:欧洲领先的在线餐厅预订平台
2019/05/27 全球购物
将时尚融入珠宝:Adornmonde
2019/10/17 全球购物
Miller Harris官网:英国小众香水品牌
2020/09/24 全球购物
ORACLE十问
2015/04/20 面试题
实习医生自我评价
2013/09/22 职场文书
2014法院干警廉洁警示教育思想汇报
2014/09/13 职场文书
2015应届毕业生求职信范文
2015/03/20 职场文书
Python预测分词的实现
2021/06/18 Python
直播实况, OMG破敌三路五十分钟大战神技局摩托车
2022/04/01 DOTA
VUE解决跨域问题Access to XMLHttpRequest at
2022/05/06 Vue.js