Bootstrap carousel (Carousel) widget
Bootstrap carousel (Carousel) plug-in is a flexible response to the site add a slider-style manner. In addition, the content is flexible enough, may be an image, embedded frame, video or any other type of content you want to place.
If you want to refer to the individual plug-in features, you need to referencecarousel.js.Or, as Bootstrap plugin Overview chapter mentioned, you can refer tobootstrap.jsor compressed version ofbootstrap.min.js.
Examples
Here is a simple slide using Bootstrap carousel (Carousel) plug-in shows a loop element of common components. In order to achieve rotation, you only need to add the code with that tag. No need to use data attributes, only need a simple class-based development can be.
Examples
<Div id = "myCarousel" class = "carousel slide">
<! - Carousel (Carousel) Index ->
<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 (Carousel) Project ->
<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 (Carousel) Navigation ->
<A class = "carousel-control left" href = "#myCarousel"
data-slide = "prev"> & lsaquo;
</ A>
<A class = "carousel-control right" href = "#myCarousel"
data-slide = "next"> & rsaquo;
</ A>
</ Div>
try it"
The results are as follows:
Optional title
You can add captions to a slide by.carousel-caption element .iteminside. Only you need to place any optional HTML to where it will be automatically aligned and formatted. The following example illustrates this point:
Examples
<Div id = "myCarousel" class = "carousel slide">
<! - Carousel (Carousel) Index ->
<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 (Carousel) Project ->
<Div class = "carousel-inner">
<Div class = "item active">
<Img src = "/wp-content/uploads/2014/07/slide1.png" alt = "First slide">
<Div class = "carousel-caption"> Title 1 </ div>
</ Div>
<Div class = "item">
<Img src = "/wp-content/uploads/2014/07/slide2.png" alt = "Second slide">
<Div class = "carousel-caption"> Title 2 </ div>
</ Div>
<Div class = "item">
<Img src = "/wp-content/uploads/2014/07/slide3.png" alt = "Third slide">
<Div class = "carousel-caption"> Title 3 </ div>
</ Div>
</ Div>
<! - Carousel (Carousel) Navigation ->
<A class = "carousel-control left" href = "#myCarousel"
data-slide = "prev"> & lsaquo;
</ A>
<A class = "carousel-control right" href = "#myCarousel"
data-slide = "next"> & rsaquo;
</ A>
</ Div>
try it"
The results are as follows:
usage
- Through data attribute: data property can be easily controlled carousel (Carousel) position.
- Attributedata-slide accepts keywordprevornext,to change the position of the slide relative to the current position.
- Usingdata-slide-to pass a companion to the original slide to the wheel index, data-slide-to = "2" will move the slider to a specific index, an index from 0 to start counting.
- data-ride = "carousel" attribute is used to mark the rotation when the page is loaded to start movie playback.
- By JavaScript: Carousel (Carousel) can be invoked manually via JavaScript, as follows:
$ ( '. Carousel'). Carousel ()
Options
There are some options through data attributes or JavaScript to pass. The following table lists these options:
| 选项名称 | 类型/默认值 | Data 属性名称 | 描述 |
|---|---|---|---|
| interval | number 默认值：5000 | data-interval | 自动循环每个项目之间延迟的时间量。如果为 false，轮播将不会自动循环。 |
| pause | string 默认值："hover" | data-pause | 鼠标进入时暂停轮播循环，鼠标离开时恢复轮播循环。 |
| wrap | boolean 默认值：true | data-wrap | 轮播是否连续循环。 |
method
Here are some of the carousel (Carousel) plug-in useful ways:
| 方法 | 描述 | 实例 |
|---|---|---|
| .carousel(options) | 初始化轮播为可选的 options 对象，并开始循环项目。 |
$('#identifier').carousel({
interval: 2000
})
|
| .carousel('cycle') | 从左到右循环轮播项目。 |
$('#identifier').carousel('cycle')
|
| .carousel('pause') | 停止轮播循环项目。 |
$('#identifier').carousel('pause') |
| .carousel(number) | 循环轮播到某个特定的帧（从 0 开始计数，与数组类似）。 |
$('#identifier').carousel(number) |
| .carousel('prev') | 循环轮播到上一个项目。 |
$('#identifier').carousel('prev') |
| .carousel('next') | 循环轮播到下一个项目。 |
$('#identifier').carousel('next') |
Examples
The following example demonstrates the method:
Examples
<Div id = "myCarousel" class = "carousel slide">
<! - Carousel (Carousel) Index ->
<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 (Carousel) Project ->
<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 (Carousel) Navigation ->
<A class = "carousel-control left" href = "#myCarousel"
data-slide = "prev"> & lsaquo; </ a>
<A class = "carousel-control right" href = "#myCarousel"
data-slide = "next"> & rsaquo; </ a>
<-! Control buttons ->
<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 () {
// Initialize Carousel $ ( ".start-Slide") click (function () {$ ( "#myCarousel") carousel ( 'cycle');.});. // Stop rotation . $ ( ".pause-Slide" ) click (function () {. $ ( "#myCarousel") Carousel ( 'pause');}); // loop rotation on a project $ ( ".prev-Slide") click (function () {$ ( "#myCarousel") carousel ( 'prev');.});. // Rotation cycle to the next item $ ( ".next-Slide") click (function () {$ ( "#myCarousel") carousel ( 'next');.});. // Loop rotation to a specific frame $ ( ".slide-One") click. (Function () {$ ( "#myCarousel") carousel (0);.});. $ ( ".slide-Two") click (function () {$ ( "#myCarousel") carousel (1) ;.}); $ ( ".slide-three") click (function () {$ ( "#myCarousel") carousel (2);..});});
</ Script>
try it"
The results are as follows:
event
The following table lists the carousel (Carousel) plug-in to be used in the event. These events can be used when the hook function.
| 事件 | 描述 | 实例 |
|---|---|---|
| slide.bs.carousel | 当调用 slide 实例方法时立即触发该事件。 |
$('#identifier').on('slide.bs.carousel', function () {
// 执行一些动作...
})
|
| slid.bs.carousel | 当轮播完成幻灯片过渡效果时触发该事件。 |
$('#identifier').on('slid.bs.carousel', function () {
// 执行一些动作...
})
|
Examples
The following example demonstrates the usage of the event:
Examples
<Div id = "myCarousel" class = "carousel slide">
<! - Carousel (Carousel) Index ->
<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 (Carousel) Project ->
<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 (Carousel) Navigation ->
<A class = "carousel-control left" href = "#myCarousel"
data-slide = "prev"> & lsaquo; </ a>
<A class = "carousel-control right" href = "#myCarousel"
data-slide = "next"> & rsaquo; </ a>
</ Div>
<Script>
$ (Function () {$ ( '#myCarousel'). On ( 'slide.bs.carousel', function () {
alert ( "when the slide instance method invoked immediately triggered the event.");});});
</ Script>
try it"
The results are as follows:
