Bootstrap - Carousel插件

Bootstrap Carousel插件 - 从概述，环境设置，基本结构，全局样式，网格系统，流体网格系统，布局，响应式设计，排版，表格，按钮，图像，图标，下拉列表，按钮，从简单而简单的步骤学习Bootstrap组，导航元素，导航栏，面包屑，分页，标签，徽章，版式，缩略图，警报，进度栏，媒体对象，Javascript插件像过渡，模态，下拉列表，Scrollspy，选项卡，工具提示，弹出，警报，按钮，折叠， Carousel，Typeahead，Affix，Glyphicons，Jumbotron，Demos。

Bootstrap轮播是一种灵活，响应迅速的方式，可以为您的网站添加滑块.除了响应之外，内容还足够灵活，可以支持图片，iframe，视频或您可能需要的任何类型的内容.

如果您想要包含此插件功能个别地，你需要 carousel.js .另外，如 Bootstrap插件概述一章所述，您可以包含 bootstrap.js 或缩小版本. bootstrap.min.js .

示例

下面的简单幻灯片显示了循环使用元素的通用组件旋转木马，使用Bootstrap carousel插件.要实现轮播，您只需要添加带有标记的代码.不需要数据属性，只需简单的基于类的开发.

‹ ›

Optional Captions

您可以使用任何.item中的.carousel-caption元素轻松地为幻灯片添加标题。在那里放置任何可选的HTML，它将自动对齐和格式化。以下示例演示:

                                                                  This Caption 1                                    This Caption 2                                    This Caption 3                   ‹   ›+

Usage

通过数据属性:使用数据属性可以轻松控制轮播的位置。

属性数据幻灯片接受关键字prev或next，这会改变相对于其当前位置的幻灯片位置。
使用data-slide-to将原始幻灯片索引传递给轮播数据 - slide-to ="2"，这会将幻灯片位置移动到以0开头的特定索引。
data-ride ="carousel"属性用于将轮播标记为从页面加载开始的动画。

通过JavaScript＆minus; 可以使用JavaScript手动调用轮播，如下所示:

$('.carousel').carousel()

Options

可以通过数据属性或JavaScript传递的某些选项列在下表:

Option Name	Type/Default Value	Data attribute name	Description
interval	number Default − 5000	data-interval	The amount of time to delay between automatically cycling an item. If false, carousel will not automatically cycle.
pause	string Default − "hover"	data-pause	Pauses the cycling of the carousel on mouseenter and resumes the cycling of the carousel on mouseleave.
wrap	boolean Default − true	data-wrap	Whether the carousel should cycle continuously or have hard stops.

Methods

以下是可与旋转木马代码一起使用的有用方法列表。

Method	Description	Example
.carousel(options)	Initializes the carousel with an optional options object and starts cycling through items.	$('#identifier').carousel({ interval: 2000})
.carousel('cycle')	Cycles through the carousel items from left to right.	$('#identifier').carousel('cycle')
.carousel('pause')	Stops the carousel from cycling through items.	$('#identifier')..carousel('pause')
.carousel(number)	Cycles the carousel to a particular frame (0 based, similar to an array).	$('#identifier').carousel(number)
.carousel('prev')	Cycles to the previous item.	$('#identifier').carousel('prev')
.carousel('next')	Cycles to the next item.	$('#identifier').carousel('next')

Example

T以下示例演示了方法的用法:

                                                                                                                                 ‹   ›

Events

Bootstrap的carousel类公开了两个事件，用于挂钩到下面列出的轮播功能.

事件	描述	示例
slide.bs.carousel	此事件立即触发调用幻灯片实例方法.	$('＃identifier').on('slide.bs. carousel'，function(){//做点什么})
slid.bs.carousel	当轮播完成幻灯片转换时会触发此事件.	$('＃identifier').on('slid.bs.carousel'，function( ){//做点什么})

示例

以下示例演示了事件的使用和减号;

 < div id ="myCarousel"class ="carousel slide"> <！ - 轮播指示符 - > < ol class ="carousel-indicators"> < li data-target ="＃myCarousel"data-slide-to ="0"class ="active"> < li data-target ="＃myCarousel"data-slide-to ="1"> < li data-target ="＃myCarousel"data-slide-to ="2">  <！ -  Carousel items  - > < div class ="carousel-inner"> < div class ="item active"> < img src ="/bootstrap/images/slide1.png"alt ="第一张幻灯片">  < div class ="item"> < img src ="/bootstrap/images/slide2.png"alt ="第二张幻灯片">  < div class ="item"> < img src ="/bootstrap/images/slide3.png"alt ="第三张幻灯片">   <！ -  Carousel nav  - > < a class ="carousel-control left"href ="＃myCarousel"data-slide ="prev">& lsaquo; < a class ="carousel-control right"href ="＃myCarousel"data-slide ="next">& rsaquo;  < script>  $(function(){ $('＃myCarousel').on('slide.bs.carousel'，function(){ alert("此事件在幻灯片播放时立即触发实例方法"+"被调用."); }); });