Bootstrap 輪播(Carousel)插件
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 >
嘗試一下»
結果如下所示:
可選的標題
您可以通過.item內的.carousel-caption元素向幻燈片添加標題。 只需要在該處放置任何可選的HTML 即可,它會自動對齊並格式化。 下面的實例演示了這點:
實例
< 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 class = " carousel-caption " > 標題1 </ div >
</ div >
< div class = " item " >
< img src = " /wp-content/uploads/2014/07/slide2.png " alt = " Second slide " >
< div class = " carousel-caption " > 標題2 </ div >
</ div >
< div class = " item " >
< img src = " /wp-content/uploads/2014/07/slide3.png " alt = " Third slide " >
< div class = " carousel-caption " > 標題3 </ div >
</ 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 >
嘗試一下»
結果如下所示:
用法
- 通過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 | 轮播是否连续循环。 |
方法
下面是一些輪播(Carousel)插件中有用的方法:
方法 | 描述 | 实例 |
---|---|---|
.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') |
實例
下面的實例演示了方法的用法:
實例
< 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 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 >
嘗試一下»
結果如下所示:
事件
下表列出了輪播(Carousel)插件中要用到的事件。 這些事件可在函數中當鉤子使用。
事件 | 描述 | 实例 |
---|---|---|
slide.bs.carousel | 当调用 slide 实例方法时立即触发该事件。 |
$('#identifier').on('slide.bs.carousel', function () { // 执行一些动作... }) |
slid.bs.carousel | 当轮播完成幻灯片过渡效果时触发该事件。 |
$('#identifier').on('slid.bs.carousel', function () { // 执行一些动作... }) |
實例
下面的實例演示了事件的用法:
實例
< 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 >
< script >
$ ( function ( ) { $ ( ' #myCarousel ' ) . on ( ' slide.bs.carousel ' , function ( ) {
alert ( " 當調用slide實例方法時立即觸發該事件。 " ) ; } ) ; } ) ;
</ script >
嘗試一下»
結果如下所示: