owl carousel2 輪播插件/支援響應式和觸屏滑動

Owl Carousel 2是上一版Owl Carousel 1.x的更新版本。Owl Carousel 2是可以讓你建立漂亮的響應式旋轉木馬的jQuery插件，它支援移動觸摸屏，有豐富的參數設定，甚至可以嵌入視訊，功能十分強大。

Owl的新特性有：

可以無限循環

項目可以居中顯示

靈活的速度控制

多級别的padding設定

項目間可以設定Margin

使幾乎所有的選項都具有響應能力

多種寬度設定

豐富的回調事件

RTL（從右向左移動）

YouTube/Vimeo視訊支援

錨連結導航

合并項

---------------------------------------------------------------------

使用方法：

1.引用js和css檔案

<link rel="stylesheet" href="owl-carousel/owl.carousel.css" target="_blank" rel="external nofollow" >
<script src="jquery.js"></script>
<script src="assets/owl-carousel/owl.carousel.js"></script>
           

2.頁面結構html代碼:

<div id="owl-example" class="owl-carousel">
    <div> <img src="../img/carousel01.png"> </div>
    <div> <img src="../img/carousel01.png"> </div>
    <div> <img src="../img/carousel01.png"> </div>
</div>
           

3.執行個體化carousel:

$(document).ready(function() {
  $("#owl-example").owlCarousel();
});
           

ok ! 重新整理頁面，檢視輪播效果。

carousel2.0支援多種輪播效果，完美響應式和拖動(觸摸屏)輪播。

參數配置(輪播效果)：在執行個體化的時候配置參數

$(document).ready(function(){
		$("#owl-example").owlCarousel({  /*對應ID調用*/
			  
			items: 1,  /*onepage顯示個數*/
			loop: true, /*支援循環播放*/
			nav: true,  /*顯示翻頁條*/
			autoplay:true, /*自動播放*/
			autoplayTimeout:3000, /*自動播放間隔時間*/
			autoplayHoverPause:true, /*滑鼠懸停停止自動播放*/
			slideBy: 'page', /*滑動的item個數,number or string(page)*/
			mouseDrag: false, /*禁止滑鼠拖拽*/
			margin: 0,  /*旋轉木馬的margin-right*/
			
		});
	});
           

參數選項參考：http://www.jq22.com/jquery-info6010