Bootstrap 輪播（Carousel）插件是一種靈活的響應(yīng)式的向站點添加滑塊的方式。除此之外，內(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）導(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組件不能自動播放的問題，這里要注意幾個問題：
1、首先注意的部分是data-ride="carousel"
默認使用Bootstrap的Carousel組件，只需要加上 data-ride="carousel" 就可以實現(xiàn)自動播放了。無需使用初始化的js函數(shù)。所以，如果carousel不會自動播放，那么首先檢查這個部分。這里還能加其他參數(shù)，比如是設(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 });});如果設(shè)置不自動播放，還可以：
$('#myCarousel').carousel({ pause: true, interval: false});以上所述是小編給大家介紹的Bootstrap 輪播(Carousel)插件，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對武林網(wǎng)網(wǎng)站的支持！
新聞熱點
疑難解答
