bxslider使用幫助

bxSlider下載+參數說明

“bxSlider”就是一款響應式的幻燈片js插件

bxSlider特性

充分響應各種設備，適應各種屏幕；

支持多種滑動模式，水平、垂直以及淡入淡出效果；

支持圖片、視頻以及任意html內容；

支持觸摸滑動；

支持Firefox，Chrome，Safari，iOS，Android，IE7+

bxSlider使用方法：

加載jQuery庫，加載bxSlider插件文件和相關CSS文件；

    <!-- bxSlider CSS file -->
    <link href="jquery.bxslider.css" rel="stylesheet" />
    
    <!-- jQuery library -->
    <script src="jquery-3.1.1.min.js"></script>
    <!-- bxSlider Javascript file -->
    <script src="jquery.bxslider.js"></script>

創建一個幻燈片區塊：

    <ul class="bxslider">
      <li><img src="images/pic1.jpg" /></li>
      <li><img src="images/pic2.jpg" /></li>
      <li><img src="images/pic3.jpg" /></li>
      <li><img src="images/pic1.jpg" /></li>
      <li><img src="images/pic2.jpg" /></li>
    </ul>
    

加上bxSlider參數激活使用：

	<script>
		$(document).ready(function() {
			$('.bxslider').bxSlider({
				mode: 'horizontal',
				moveSlides: 1,
				slideMargin: 40,
				infiniteLoop: true,
				slideWidth: 660,
				minSlides: 3,
				maxSlides: 3,
				speed: 800,
			});
		});
	</script>
		

bxSlider下載地址：官方下載

bxSlider下載地址：github下載

bxSlider具體參數：

參數	描述	默認值
mode	設置滑動模式，'horizontal':水平, 'vertical':垂直, 'fade':淡入淡出	horizontal
speed	內容切換速度，數字，ms	500
startSlide	初始滑動位置，數字	0
randomStart	隨機初始滑動位置	true
infiniteLoop	循環滑動，如果設置為true時，則到最后滑動位置時會切換到初始位置	true
easing	切換動畫擴展，可以借助jQuery Easing 動畫效果擴展設置不同的切換動畫效果	null
captions	設置顯示圖片標題，當滑動內容為圖片時並設置屬性title，可以顯示圖片標題	false
video	支持視頻，當設置為true時，需要jquery.fitvids.js支持	false
pager	設置是否顯示分頁，設置為true時，會在滑動內容下方顯示分頁圖標	true
controls	設置是否顯示上一副和下一幅按鈕	true
auto	設置是否自動滑動	false
pause	自動滑動時停留時間，數字，ms	4000
autoHover	當鼠標滑向滑動內容上時，是否暫停滑動	false