Bootstrap 輪播（Carousel）插件

Bootstrap 輪播（Carousel）插件是一種靈活的響應(yīng)式的向站點(diǎn)添加滑塊的方式。除此之外，內(nèi)容也是足夠靈活的，可以是圖像、內(nèi)嵌框架、視頻或者其他您想要放置的任何類型的內(nèi)容。

創(chuàng)新互聯(lián)公司專業(yè)為企業(yè)提供坡頭網(wǎng)站建設(shè)、坡頭做網(wǎng)站、坡頭網(wǎng)站設(shè)計、坡頭網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計與制作、坡頭企業(yè)網(wǎng)站模板建站服務(wù)，10年坡頭做網(wǎng)站經(jīng)驗(yàn)，不只是建網(wǎng)站，更提供有價值的思路和整體網(wǎng)絡(luò)服務(wù)。

如果您想要單獨(dú)引用該插件的功能，那么您需要引用
carousel.js?；蛘?，正如 Bootstrap 插件概覽 一章中所提到，您可以引用
bootstrap.js 或壓縮版的
bootstrap.min.js。

實(shí)例

下面是一個簡單的幻燈片，使用 Bootstrap 輪播（Carousel）插件顯示了一個循環(huán)播放元素的通用組件。為了實(shí)現(xiàn)輪播，您只需要添加帶有該標(biāo)記的代碼即可。不需要使用 data 屬性，只需要簡單的基于 class 的開發(fā)即可。

實(shí)例

<
div

id
=
"
myCarousel
"

class
=
"
carousel slide
"
>



<
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
>



<
div

class
=
"
carousel-inner
"
>

<
div

class
=
"
item active
"
>

<
img

decoding
=
"
async
"

src
=
"
/wp-content/uploads/2014/07/slide1.png
"

alt
=
"
First slide
"
>

div
>

<
div

class
=
"
item
"
>

<
img

decoding
=
"
async
"

src
=
"
/wp-content/uploads/2014/07/slide2.png
"

alt
=
"
Second slide
"
>

div
>

<
div

class
=
"
item
"
>

<
img

decoding
=
"
async
"

src
=
"
/wp-content/uploads/2014/07/slide3.png
"

alt
=
"
Third slide
"
>

div
>

div
>



<
a

class
=
"
carousel-control left
"

href
=
"
#myCarousel
"

data-slide
=
"
prev
"
>

<
span

_ngcontent-c3
=
"
"

aria-hidden
=
"
true
"

class
=
"
glyphicon glyphicon-chevron-right
"
>
span
>
a
>

<
a

class
=
"
carousel-control right
"

href
=
"
#myCarousel
"

data-slide
=
"
next
"
>
›
a
>

div
>

嘗試一下 ?

結(jié)果如下所示：

可選的標(biāo)題

您可以通過 .item 內(nèi)的 .carousel-caption 元素向幻燈片添加標(biāo)題。只需要在該處放置任何可選的 HTML 即可，它會自動對齊并格式化。下面的實(shí)例演示了這點(diǎn)：

實(shí)例

<
div

id
=
"
myCarousel
"

class
=
"
carousel slide
"
>



<
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
>



<
div

class
=
"
carousel-inner
"
>

<
div

class
=
"
item active
"
>

<
img

decoding
=
"
async
"

src
=
"
/wp-content/uploads/2014/07/slide1.png
"

alt
=
"
First slide
"
>

<
div

class
=
"
carousel-caption
"
>
標(biāo)題 1
div
>

div
>

<
div

class
=
"
item
"
>

<
img

decoding
=
"
async
"

src
=
"
/wp-content/uploads/2014/07/slide2.png
"

alt
=
"
Second slide
"
>

<
div

class
=
"
carousel-caption
"
>
標(biāo)題 2
div
>

div
>

<
div

class
=
"
item
"
>

<
img

decoding
=
"
async
"

src
=
"
/wp-content/uploads/2014/07/slide3.png
"

alt
=
"
Third slide
"
>

<
div

class
=
"
carousel-caption
"
>
標(biāo)題 3
div
>

div
>

div
>



<
a

class
=
"
left carousel-control
"

href
=
"
#myCarousel
"

role
=
"
button
"

data-slide
=
"
prev
"
>

<
span

class
=
"
glyphicon glyphicon-chevron-left
"

aria-hidden
=
"
true
"
>
span
>

<
span

class
=
"
sr-only
"
>
Previous
span
>

a
>

<
a

class
=
"
right carousel-control
"

href
=
"
#myCarousel
"

role
=
"
button
"

data-slide
=
"
next
"
>

<
span

class
=
"
glyphicon glyphicon-chevron-right
"

aria-hidden
=
"
true
"
>
span
>

<
span

class
=
"
sr-only
"
>
Next
span
>

a
>

div
>

嘗試一下 ?

結(jié)果如下所示：

用法

• 通過 data 屬性：使用 data 屬性可以很容易控制輪播（Carousel）的位置。
  • 屬性 data-slide 接受關(guān)鍵字 prev 或 next，用來改變幻燈片相對于當(dāng)前位置的位置。
  • 使用 data-slide-to 來向輪播傳遞一個原始滑動索引，data-slide-to="2" 將把滑塊移動到一個特定的索引，索引從 0 開始計數(shù)。
  • data-ride="carousel" 屬性用于標(biāo)記輪播在頁面加載時就開始動畫播放。
• 通過 JavaScript：輪播（Carousel）可通過 JavaScript 手動調(diào)用，如下所示：

  $('.carousel').carousel()
  

選項(xiàng)

有一些選項(xiàng)是通過 data 屬性或 JavaScript 來傳遞的。下表列出了這些選項(xiàng)：

選項(xiàng)名稱	類型/默認(rèn)值	Data 屬性名稱	描述
interval	number 默認(rèn)值：5000	data-interval	自動循環(huán)每個項(xiàng)目之間延遲的時間量。如果為 false，輪播將不會自動循環(huán)。
pause	string 默認(rèn)值："hover"	data-pause	鼠標(biāo)進(jìn)入時暫停輪播循環(huán)，鼠標(biāo)離開時恢復(fù)輪播循環(huán)。
wrap	boolean 默認(rèn)值：true	data-wrap	輪播是否連續(xù)循環(huán)。

方法

下面是一些輪播（Carousel）插件中有用的方法：

$('#identifier').carousel({
    interval: 2000
})

$('#identifier').carousel('cycle')

$('#identifier').carousel('pause')

$('#identifier').carousel(number)

$('#identifier').carousel('prev')

$('#identifier').carousel('next')

方法	描述	實(shí)例
.carousel(options)	初始化輪播為可選的 options 對象，并開始循環(huán)項(xiàng)目。
.carousel('cycle')	從左到右循環(huán)輪播項(xiàng)目。
.carousel('pause')	停止輪播循環(huán)項(xiàng)目。
.carousel(number)	循環(huán)輪播到某個特定的幀（從 0 開始計數(shù)，與數(shù)組類似）。
.carousel('prev')	循環(huán)輪播到上一個項(xiàng)目。
.carousel('next')	循環(huán)輪播到下一個項(xiàng)目。

實(shí)例

下面的實(shí)例演示了方法的用法：

實(shí)例

<
div

id
=
"
myCarousel
"

class
=
"
carousel slide
"
>



<
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
>



<
div

class
=
"
carousel-inner
"
>

<
div

class
=
"
item active
"
>

<
img

decoding
=
"
async
"

src
=
"
/wp-content/uploads/2014/07/slide1.png
"

alt
=
"
First slide
"
>

div
>

<
div

class
=
"
item
"
>

<
img

decoding
=
"
async
"

src
=
"
/wp-content/uploads/2014/07/slide2.png
"

alt
=
"
Second slide
"
>

div
>

<
div

class
=
"
item
"
>

<
img

decoding
=
"
async
"

src
=
"
/wp-content/uploads/2014/07/slide3.png
"

alt
=
"
Third slide
"
>

div
>

div
>



<
a

class
=
"
left carousel-control
"

href
=
"
#myCarousel
"

role
=
"
button
"

data-slide
=
"
prev
"
>

<
span

class
=
"
glyphicon glyphicon-chevron-left
"

aria-hidden
=
"
true
"
>
span
>

<
span

class
=
"
sr-only
"
>
Previous
span
>

a
>

<
a

class
=
"
right carousel-control
"

href
=
"
#myCarousel
"

role
=
"
button
"

data-slide
=
"
next
"
>

<
span

class
=
"
glyphicon glyphicon-chevron-right
"

aria-hidden
=
"
true
"
>
span
>

<
span

class
=
"
sr-only
"
>
Next
span
>

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
'
)
;
}
)
;
//
循環(huán)輪播到上一個項(xiàng)目

$
(
"
.prev-slide
"
)
.
click
(
function
(
)
{
$
(
"
#myCarousel
"
)
.
carousel
(
'
prev
'
)
;
}
)
;
//
循環(huán)輪播到下一個項(xiàng)目

$
(
"
.next-slide
"
)
.
click
(
function
(
)
{
$
(
"
#myCarousel
"
)
.
carousel
(
'
next
'
)
;
}
)
;
//
循環(huán)輪播到某個特定的幀

$
(
"
.slide-one
"
)
.
click
(
function
(
)
{
$
(
"
#myCarousel
"
)
.
carousel
(
0
)
;
}
)
; $
(
"
.slide-two
"
)
.
click
(
function
(
)
{
$
(
"
#myCarousel
"
)
.
carousel
(
1
)
;
}
)
; $
(
"
.slide-three
"
)
.
click
(
function
(
)
{
$
(
"
#myCarousel
"
)
.
carousel
(
2
)
;
}
)
;
}
)
;
script
>

嘗試一下 ?

結(jié)果如下所示：

事件

下表列出了輪播（Carousel）插件中要用到的事件。這些事件可在函數(shù)中當(dāng)鉤子使用。

$('#identifier').on('slide.bs.carousel', function () {
    // 執(zhí)行一些動作...
})

$('#identifier').on('slid.bs.carousel', function () {
    // 執(zhí)行一些動作...
})

事件	描述	實(shí)例
slide.bs.carousel	當(dāng)調(diào)用 slide 實(shí)例方法時立即觸發(fā)該事件。
slid.bs.carousel	當(dāng)輪播完成幻燈片過渡效果時觸發(fā)該事件。

實(shí)例

下面的實(shí)例演示了事件的用法：

實(shí)例

<
div

id
=
"
myCarousel
"

class
=
"
carousel slide
"
>



<
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
>



<
div

class
=
"
carousel-inner
"
>

<
div

class
=
"
item active
"
>

<
img

decoding
=
"
async
"

src
=
"
/wp-content/uploads/2014/07/slide1.png
"

alt
=
"
First slide
"
>

div
>

<
div

class
=
"
item
"
>

<
img

decoding
=
"
async
"

src
=
"
/wp-content/uploads/2014/07/slide2.png
"

alt
=
"
Second slide
"
>

div
>

<
div

class
=
"
item
"
>

<
img

decoding
=
"
async
"

src
=
"
/wp-content/uploads/2014/07/slide3.png
"

alt
=
"
Third slide
"
>

div
>

div
>



<
a

class
=
"
left carousel-control
"

href
=
"
#myCarousel
"

role
=
"
button
"

data-slide
=
"
prev
"
>

<
span

class
=
"
glyphicon glyphicon-chevron-left
"

aria-hidden
=
"
true
"
>
span
>

<
span

class
=
"
sr-only
"
>
Previous
span
>

a
>

<
a

class
=
"
right carousel-control
"

href
=
"
#myCarousel
"

role
=
"
button
"

data-slide
=
"
next
"
>

<
span

class
=
"
glyphicon glyphicon-chevron-right
"

aria-hidden
=
"
true
"
>
span
>

<
span

class
=
"
sr-only
"
>
Next
span
>

a
>

div
>

<
script
>
$
(
function
(
)
{
$
(
'
#myCarousel
'
)
.
on
(
'
slide.bs.carousel
'
,
function

(
)

{

alert
(
"
當(dāng)調(diào)用 slide 實(shí)例方法時立即觸發(fā)該事件。
"
)
;
}
)
;
}
)
;
script
>

嘗試一下 ?

結(jié)果如下所示：

分享標(biāo)題：創(chuàng)新互聯(lián)Bootstrap教程：Bootstrap 輪播（Carousel）插件
分享路徑：http://www.5511xx.com/article/cdseehg.html