Latest web development tutorials

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 " > &lsaquo; </ a > < a class = " carousel-control right " href = " #myCarousel " data-slide = " next " > &rsaquo; </ a > </ div >

嘗試一下»

結果如下所示:

簡單的輪播(Carousel)插件

可選的標題

您可以通過.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 " > &lsaquo; </ a > < a class = " carousel-control right " href = " #myCarousel " data-slide = " next " > &rsaquo; </ a > </ div >

嘗試一下»

結果如下所示:

輪播(Carousel)插件的標題

用法

  • 通過data屬性 :使用data屬性可以很容易控制輪播(Carousel)的位置。
    • 屬性data-slide接受關鍵字prevnext ,用來改變幻燈片相對於當前位置的位置。
    • 使用data-slide-to來向輪播傳遞一個原始滑動索引,data-slide-to="2"將把滑塊移動到一個特定的索引,索引從0開始計數。
    • data-ride="carousel"屬性用於標記輪播在頁面加載時就開始動畫播放。
  • 通過JavaScript :輪播(Carousel)可通過JavaScript手動調用,如下所示:
    $('.carousel').carousel()
    

選項

有一些選項是通過data 屬性或JavaScript 來傳遞的。 下表列出了這些選項:

选项名称类型/默认值Data 属性名称描述
intervalnumber
默认值:5000
data-interval自动循环每个项目之间延迟的时间量。如果为 false,轮播将不会自动循环。
pausestring
默认值:"hover"
data-pause鼠标进入时暂停轮播循环,鼠标离开时恢复轮播循环。
wrapboolean
默认值: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 " > &lsaquo; </ a > < a class = " carousel-control right " href = " #myCarousel " data-slide = " next " > &rsaquo; </ 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)插件方法

事件

下表列出了輪播(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 " > &lsaquo; </ a > < a class = " carousel-control right " href = " #myCarousel " data-slide = " next " > &rsaquo; </ a > </ div > < script >
$ ( function ( ) { $ ( ' #myCarousel ' ) . on ( ' slide.bs.carousel ' , function ( ) { alert ( " 當調用slide實例方法時立即觸發該事件。 " ) ; } ) ; } ) ;
</ script >

嘗試一下»

結果如下所示:

輪播(Carousel)插件事件