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 相关文章推荐
JavaScript 监听textarea中按键事件
Oct 08 Javascript
jquery ajax对特殊字符进行转义防止js注入使用示例
Nov 21 Javascript
freemarker判断对象是否为空的方法
Aug 13 Javascript
几句话带你理解JS中的this、闭包、原型链
Sep 26 Javascript
JavaScript制作弹出层效果
Dec 02 Javascript
Javascript 使用ajax与C#获取文件大小实例详解
Jan 13 Javascript
Angular在模板驱动表单中自定义校验器的方法
Aug 09 Javascript
Vue2.5通过json文件读取数据的方法
Feb 27 Javascript
详解Angular中通过$location获取地址栏的参数
Aug 02 Javascript
Vue项目中使用WebUploader实现文件上传的方法
Jul 21 Javascript
vue之封装多个组件调用同一接口的案例
Aug 11 Javascript
小程序自定义圆形进度条
Nov 17 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
PHP开发中常用的十个代码样例
2016/02/02 PHP
ThinkPHP3.2.3实现分页的方法详解
2016/06/03 PHP
PHP利用curl发送HTTP请求的实例代码
2020/07/09 PHP
JS 密码强度验证(兼容IE,火狐,谷歌)
2010/03/15 Javascript
Jquery插件之多图片异步上传
2010/10/20 Javascript
统计jQuery中各字符串出现次数的工具
2012/05/03 Javascript
JS将数字转换成三位逗号分隔的样式(示例代码)
2014/02/19 Javascript
浏览器窗口加载和大小改变事件示例
2014/02/27 Javascript
JS中getYear()和getFullYear()区别分析
2014/07/04 Javascript
javascript模拟实现ajax加载框实例
2014/10/15 Javascript
JavaScript检测并限制复选框选中个数的方法
2015/08/12 Javascript
JS函数定义方式的区别介绍
2016/03/22 Javascript
用JS生成UUID的方法实例
2016/03/30 Javascript
零基础轻松学JavaScript闭包
2016/12/30 Javascript
fullpage.js最后一屏滚动方式
2018/02/06 Javascript
微信小程序中如何计算距离某个节日还有多少天
2019/07/15 Javascript
详解vue+axios给开发环境和生产环境配置不同的接口地址
2019/08/16 Javascript
vue弹出框组件封装实例代码
2019/10/31 Javascript
Node绑定全局TraceID的实现方法
2019/11/14 Javascript
vue相同路由跳转强制刷新该路由组件操作
2020/08/05 Javascript
解决vue组件没显示,没起作用,没报错,但该显示的组件没显示问题
2020/09/02 Javascript
python从入门到精通(DAY 2)
2015/12/20 Python
python 循环while和for in简单实例
2016/08/16 Python
用python结合jieba和wordcloud实现词云效果
2017/09/05 Python
Scrapy-Redis结合POST请求获取数据的方法示例
2019/05/07 Python
在Django model中设置多个字段联合唯一约束的实例
2019/07/17 Python
使用keras实现Precise, Recall, F1-socre方式
2020/06/15 Python
python 实现两个npy档案合并
2020/07/01 Python
aec加密 php_php aes加密解密类(兼容php5、php7)
2021/03/14 PHP
纯css3实现宠物小鸡实例代码
2018/10/08 HTML / CSS
美国艺术和工艺品商店:Hobby Lobby
2020/12/09 全球购物
linux面试题参考答案(9)
2016/01/29 面试题
我的网上商城创业计划书
2013/12/26 职场文书
经营目标责任书
2015/05/08 职场文书
通用员工手册范本
2015/05/14 职场文书
党组织关系的介绍信模板
2019/06/21 职场文书