聊一聊 bootstrap 的輪播圖插件

今天做工作的時候，輕車熟路的做完，又用到了bootstrap的輪播圖，覺得有必要安利一下這個插件，如果你需要的輪播圖。功能不需要太炫酷，那么bootstrap的插件是你的首要選擇。

使用方式

直接引入bootsrap.js和bootstrap.css兩個文件即可。

標題 1

標題 2

標題 3

Previous Next

上面的示例代碼從菜鳥教程直接copy過來的。根據需要酌情刪減。

$('.carousel').carousel()

carousel里面有一些選項，可以進行設置。

interval：輪播的間隔時間，默認值5000

pause：何時暫停，默認值hover，鼠標懸浮上去，則暫停。值改為null，意味著無論怎樣都不暫停。

wrap：輪播是否連環，默認為true。

keyboard：是否相應鍵盤操作，默認為true。

//輪播事件為200

$('#identifier').carousel({

interval: 2000

})

//從左到右循環輪播

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

//停止輪播

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

//輪播到某一幀

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

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

//輪播到上一個項目

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

//輪播到下一個項目

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

//滑動時出發的回調

$('#identifier').on('slide.bs.carousel', function () {

// 執行一些動作...

})

//完成滑動過渡效果后，觸發的事件

$('#identifier').on('slid.bs.carousel', function () {

// 執行一些動作...

})

搞一個點擊哪里，跳轉哪里的東西

var car = $(".carousel");

car.carousel('pause');

$("#firstLi").bind("click", function() {

car.carousel(0);

car.carousel('pause');

});

$("#secondLi").bind("click", function() {

car.carousel(1);

car.carousel('pause');

});

先說一下swiper插件，他確實好用，功能強大，但是不支持ie8。支持ie8的版本swiper2不支持自動調整高度的功能。

owl-carousel支持自動調整高度，支持ie8.但是他在ie8下會有個閃爍的問題，這個官網也存在此問題，是個bug。

最終bootstrap的輪播圖最為好使。

Bootstrap

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。