Bootstrap 輪播(Carousel)插件
Bootstrap 輪播（Carousel）插件是一種靈活的響應(yīng)式的向站點(diǎn)添加滑塊的方式。除此之外，內(nèi)容也是足夠靈活的，可以是圖像、內(nèi)嵌框架、視頻或者其他您想要放置的任何類型的內(nèi)容。
如果您想要單獨(dú)引用該插件的功能，那么您需要引用 carousel.js?；蛘撸?Bootstrap 插件概覽 一章中所提到，您可以引用 bootstrap.js 或壓縮版的 bootstrap.min.js。
下面是一個(gè)簡單的幻燈片，使用 Bootstrap 輪播（Carousel）插件顯示了一個(gè)循環(huán)播放元素的通用組件。為了實(shí)現(xiàn)輪播，您只需要添加帶有該標(biāo)記的代碼即可。不需要使用 data 屬性，只需要簡單的基于 class 的開發(fā)即可。
<div id="myCarousel" class="carousel slide">
<!-- 輪播（Carousel）指標(biāo) -->
<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）項(xiàng)目 -->
<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）導(dǎo)航 -->
<a class="carousel-control left" href="#myCarousel"
data-slide="prev">‹
</a>
<a class="carousel-control right" href="#myCarousel"
data-slide="next">›
</a>
</div>
另外關(guān)于Carousel組件不能自動播放的問題，這里要注意幾個(gè)問題：
1、首先注意的部分是data-ride="carousel"
默認(rèn)使用Bootstrap的Carousel組件，只需要加上 data-ride="carousel" 就可以實(shí)現(xiàn)自動播放了。無需使用初始化的js函數(shù)。所以，如果carousel不會自動播放，那么首先檢查這個(gè)部分。這里還能加其他參數(shù)，比如是設(shè)置圖片輪轉(zhuǎn)的時(shí)間間隔。
代碼：
<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="2000">
2、其實(shí)還有手動初始化carousel組件的方法
這個(gè)方法在Bootstrap 2.x就在使用，當(dāng) data-ride="carousel" 這個(gè)方法不管用的時(shí)候，可以手動初始化一下。代碼如下：
$('#myCarousel').carousel();
如果還想控制圖片輪轉(zhuǎn)的時(shí)間間隔，還有參數(shù)：
$(function(){
$('#myCarousel').carousel({
interval: 3000
});
});
如果設(shè)置不自動播放，還可以：
$('#myCarousel').carousel({
pause: true,
interval: false
});
以上所述是小編給大家介紹的Bootstrap 輪播(Carousel)插件，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
- 使用BootStrap建立響應(yīng)式網(wǎng)頁——通欄輪播圖（carousel）
- 利用BootStrap的Carousel.js實(shí)現(xiàn)輪播圖動畫效果
- BootStrap框架個(gè)人總結(jié)(bootstrap框架、導(dǎo)航條、下拉菜單、輪播廣告carousel、柵格系統(tǒng)布局、標(biāo)簽頁tabs、模態(tài)框、菜單定位)
- Bootstrap圖片輪播組件Carousel使用方法詳解
- BootStrap 輪播插件(carousel)支持左右手勢滑動的方法(三種)
- Bootstrap carousel輪轉(zhuǎn)圖的使用實(shí)例詳解
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了原生JS實(shí)現(xiàn)圖片輪播切換效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12
本文主要介紹了JS批量替換內(nèi)容中關(guān)鍵詞為超鏈接，避開已存在的鏈接和alt、title中的關(guān)鍵詞的方法。下面跟著小編一起來看下吧2017-02-02
Typescript學(xué)習(xí)之接口interface舉例詳解
TypeScript是JavaScript的一個(gè)超集,主要提供了類型系統(tǒng)和對ES6+的支持,TypeScript的核心原則之一是對值所具有的結(jié)構(gòu)進(jìn)行類型檢查,這篇文章主要給大家介紹了關(guān)于Typescript學(xué)習(xí)之接口interface的相關(guān)資料,需要的朋友可以參考下2024-03-03
JavaScript實(shí)現(xiàn)各種排序的代碼詳解
這篇文章給大家介紹了js實(shí)現(xiàn)各種排序功能，包括冒泡排序，選擇排序和插入排序，代碼簡單易懂，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的的朋友參考下吧2017-08-08
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)滑動滑塊驗(yàn)證登錄，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-07-07
JavaScript數(shù)組實(shí)現(xiàn)數(shù)據(jù)結(jié)構(gòu)中的隊(duì)列與堆棧
這篇文章主要介紹了JavaScript數(shù)組實(shí)現(xiàn)數(shù)據(jù)結(jié)構(gòu)中的隊(duì)列與堆棧的相關(guān)資料,需要的朋友可以參考下2016-05-05
這篇文章主要介紹了基于BootStrap的前端分頁帶省略號和上下頁效果,需要的朋友可以參考下2017-05-05
使用 JavaScript 進(jìn)行函數(shù)式編程 (一) 翻譯
本文是函數(shù)式編程系列的第一篇文章。這里我會簡要介紹一下編程范式，然后會直接介紹使用 Javascript 進(jìn)行函數(shù)式編程的概念，因?yàn)?JavsScript 是最被認(rèn)可的函數(shù)式程序語言之一。我們鼓勵(lì)讀者通過參考資料部分進(jìn)一步了解這一迷人的概念2015-10-10
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)瀑布流分頁滾動加載，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
關(guān)于Stream和Buffer的相互轉(zhuǎn)換詳解
這篇文章主要給大家介紹了關(guān)于Stream和Buffer相互轉(zhuǎn)換的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧。2017-07-07