bootstrap's plugin:sthe usage of carousel
if we want use the carousel.js,we need quote it in the page.
sample code:
<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> we can add "title" in the item. for example:
<div class="item active"> <img src="/wp-content/uploads/2014/07/slide1.png" alt="First slide"> <div class="carousel-caption">标题 1</div> </div> 通过 data 属性:使用 data 属性可以很容易控制轮播(Carousel)的位置。
- 属性 data-slide 接受关键字 prev 或 next,用来改变幻灯片相对于当前位置的位置。
- 使用 data-slide-to 来向轮播床底一个原始滑动索引,data-slide-to="2" 将把滑块移动到一个特定的索引,索引从 0 开始计数。
- data-ride="carousel" 属性用于标记轮播在页面加载时就开始动画播放。
通过 JavaScript:轮播(Carousel)可通过 JavaScript 手动调用,如下所示:
$('.carousel').carousel()
选项
有一些选项是通过 data 属性或 JavaScript 来传递的。下表列出了这些选项:
选项名称 | 类型/默认值 | Data 属性名称 | 描述 |
---|---|---|---|
interval | number 默认值:5000 |
data-interval | 自动循环每个项目之间延迟的时间量。如果为 false,轮播将不会自动循环。 |
pause | string 默认值:"hover" |
data-pause | 鼠标进入时暂停轮播循环,鼠标离开时恢复轮播循环。 |
wrap | boolean 默认值:true |
data-wrap | 轮播是否连续循环。 |
<!-- 控制按钮 --> <div style="text-align:center;"> <input type="button" class="btn start-slide" value="Start"> <input type="button" class="btn pause-slide" value="Pause"> <input type="button" class="btn prev-slide" value="Previous Slide"> <input type="button" class="btn next-slide" value="Next Slide"> <input type="button" class="btn slide-one" value="Slide 1"> <input type="button" class="btn slide-two" value="Slide 2"> <input type="button" class="btn slide-three" value="Slide 3"> </div> </div> <script> $(function(){ // 初始化轮播 $(".start-slide").click(function(){ $("#myCarousel").carousel('cycle'); }); // 停止轮播 $(".pause-slide").click(function(){ $("#myCarousel").carousel('pause'); }); // 循环轮播到上一个项目 $(".prev-slide").click(function(){ $("#myCarousel").carousel('prev'); }); // 循环轮播到下一个项目 $(".next-slide").click(function(){ $("#myCarousel").carousel('next'); }); // 循环轮播到某个特定的帧 $(".slide-one").click(function(){ $("#myCarousel").carousel(0); }); $(".slide-two").click(function(){ $("#myCarousel").carousel(1); }); $(".slide-three").click(function(){ $("#myCarousel").carousel(2); }); }); </script>
bootstrap's plugin:sthe usage of carousel的更多相关文章
- Bootstrap历练实例:轮播(carousel)
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...
- bootstrap 学习笔记 轮播(Carousel)插件
Bootstrap轮播(carousel)插件是一种灵活的响应式的向站点添加滑块的方式.除些之外,内容也是足够灵活的,可以是图像,内嵌框架,视频或者其他您想要旋转的任何类型的内容. 示例: 下面是不念 ...
- bootstrap使用总结(导航在carousel居中之上)
在导航中想实现这样 carousel 在底部,导航条在上面中间,div结构为以下 <div class="navbar-wrapper"style="width: ...
- Bootstrap框架 inconfont font-awesome
Bootstrap框架和inconfont.font-awesome使用 iconfont的使用:https://www.cnblogs.com/clschao/articles/10387580.h ...
- Bootstrap 框架 day57
Bootstrap框架 Bootstrap介绍 Bootstrap是Twitter开源的基于HTML.CSS.JavaScript的前端框架. 它是为实现快速开发Web应用程序而设计的一套前端工具包 ...
- Bootstrap框架和inconfont、font-awesome使用
iconfont的使用:https://www.cnblogs.com/clschao/articles/10387580.html Bootstrap介绍 Bootstrap是Twitter开源的基 ...
- Web前端学习笔记之BootStrap
Bootstrap介绍 Bootstrap是Twitter开源的基于HTML.CSS.JavaScript的前端框架. 它是为实现快速开发Web应用程序而设计的一套前端工具包. 它支持响应式布局,并且 ...
- DAY14-前端之Bootstrap框架
Bootstrap介绍 Bootstrap是Twitter开源的基于HTML.CSS.JavaScript的前端框架. 它是为实现快速开发Web应用程序而设计的一套前端工具包. 它支持响应式布局,并且 ...
- 前端基础(六):Bootstrap框架
Bootstrap介绍 Bootstrap是Twitter开源的基于HTML.CSS.JavaScript的前端框架. 它是为实现快速开发Web应用程序而设计的一套前端工具包. 它支持响应式布局,并且 ...
随机推荐
- VC 中使用 CToolTipCtrl 消失后不再出现的Bug。。。。
最近用WTL重写CGdipButton.从ButtonST中将CtoolTipCtrl的相关代码转过来,发现一个问题: ToolTip可以显示,鼠标移开后再移动到button上也可以再次显示,但是按下 ...
- ubuntu下安装BeyondCompare比较工具
在ubuntu12.04下使用比较工具,这里参考了网上的一个方法来安装BeyondCompare3 首先,下载相关软件: 这里选择了BCompare: http://www.scootersoftwa ...
- 小菜鸟安装CocoaPods
刚来到公司,以前没有用过CocoaPods. 参考的以下两篇文章,都是转载的. 第一篇比较偏技术性,叫做<Mac下CocoaPods安装步骤> http://blog.csdn.net/a ...
- app测试--稳定性测试
稳定性测试的概念有2种, 一, 稳定性测试,对应于异常性测试,即发生异常情况时,系统如何反应的测试.包含: 1 交互性测试,被打扰的情况,如来电,短信,低电量等.这些其实在上章的功能测试中有提到. 2 ...
- HDU 5775 Bubble Sort
对于一个数,可以记录3个位置:初始位置,终点位置,最右边的位置. 初始位置和终点位置容易计算.最多边的位置即为初始状态下该数的位置+该数之后还有多少数比该数小. 三个位置中的min即为leftpos, ...
- HDU 2732 Leapin' Lizards
网络最大流+拆点.输出有坑!!! #include<cstdio> #include<cstring> #include<string> #include<c ...
- 三层交换机配置说明(华为S5700设置三个网段互通)
1.配置Switch # 创建VLAN <HUAWEI> system-view[HUAWEI] sysname Switch[Switch] vlan batch 10 20 30# 配 ...
- 东芝MIPI解码TC358746AXBG和OV6211使用及配置
Camera Sensor常见的接口类型: 1.有并口信号(D0~D7.PCLK.HSYNC.VSYNC),一般的处理器有DCMI接口,如ST32F207x系列,直接相连就可以使用. 2.MIPI接口 ...
- /usr 的由来及/usr目录结
/usr 的由来及/usr目录结构 本文转自Delectat.com讨论中,大部分观点认为: usr 是 unix system resources 的缩写: usr 是 user 的缩写: us ...
- hdu_5742_It's All In The Mind
题目链接:hdu_5742_It's All In The Mind 题意: 有一个部分的数列,让你找一个满足他给的三个条件的数列,使前两个数的和除这个数列的sum最大 题解: xjb贪心一下就行了. ...