快捷導(dǎo)航

Bootstrap 輪播(Carousel)插件

更新時(shí)間：2016年12月26日 09:14:04 作者：月夜清風(fēng)

Bootstrap 輪播（Carousel）插件是一種靈活的響應(yīng)式的向站點(diǎn)添加滑塊的方式。下面通過(guò)本文給大家介紹Bootstrap 輪播(Carousel)插件，非常不錯(cuò)，需要的朋友參考下吧

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

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

下面是一個(gè)簡(jiǎn)單的幻燈片，使用 Bootstrap 輪播（Carousel）插件顯示了一個(gè)循環(huán)播放元素的通用組件。為了實(shí)現(xiàn)輪播，您只需要添加帶有該標(biāo)記的代碼即可。不需要使用 data 屬性，只需要簡(jiǎn)單的基于 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">&lsaquo;
  </a>
  <a class="carousel-control right" href="#myCarousel" 
    data-slide="next">&rsaquo;
  </a>
</div>

另外關(guān)于Carousel組件不能自動(dòng)播放的問(wèn)題，這里要注意幾個(gè)問(wèn)題：

1、首先注意的部分是data-ride="carousel"

默認(rèn)使用Bootstrap的Carousel組件，只需要加上 data-ride="carousel" 就可以實(shí)現(xiàn)自動(dòng)播放了。無(wú)需使用初始化的js函數(shù)。所以，如果carousel不會(huì)自動(dòng)播放，那么首先檢查這個(gè)部分。這里還能加其他參數(shù)，比如是設(shè)置圖片輪轉(zhuǎn)的時(shí)間間隔。

代碼：

<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="2000">

2、其實(shí)還有手動(dòng)初始化carousel組件的方法

這個(gè)方法在Bootstrap 2.x就在使用，當(dāng) data-ride="carousel" 這個(gè)方法不管用的時(shí)候，可以手動(dòng)初始化一下。代碼如下：

$('#myCarousel').carousel();

如果還想控制圖片輪轉(zhuǎn)的時(shí)間間隔，還有參數(shù)：

$(function(){
  $('#myCarousel').carousel({
   interval: 3000
  });
});

如果設(shè)置不自動(dòng)播放，還可以：

$('#myCarousel').carousel({
  pause: true,
  interval: false
});

以上所述是小編給大家介紹的Bootstrap 輪播(Carousel)插件，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

Bootstrap 輪播(Carousel)插件

相關(guān)文章

最新評(píng)論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具