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