調用方法：
引入jQuery和owl.carousel相關組件
<link href="css/owl.carousel.css" rel="stylesheet">
<link href="css/owl.theme.css" rel="stylesheet">
<script src="js/jquery.js"></script>
<script src="js/owl.carousel.js"></script>HTML
<div id="owl-demo" class="owl-carousel">
<a class="item"><img src="img/owl1.jpg" alt=""></a>
<a class="item"><img src="img/owl2.jpg" alt=""></a>
<a class="item"><img src="img/owl3.jpg" alt=""></a>
......
</div>JS調用
$(function(){
$('#owl-example').owlCarousel();
});參數說明：
| 參數 | 描述 | 默認值 |
| items | 幻燈片每頁可見個數 | 5 |
| itemsDesktop | 設置瀏覽器寬度和幻燈片可見個數，格式爲[X,Y]，X 爲瀏覽器寬度，Y 爲可見個數，如[1199,4]就是如果瀏覽器寬度小於1199，每頁顯示 4 張，此參數主要用於響應式設計。也可以使用 false | [1199,4] |
| itemsDesktopSmall | 同上 | [979,3] |
| itemsTablet | 同上 | [768,2] |
| itemsTabletSmall | 同上，默認爲 false | false |
| itemsMobile | 同上 | [479,1] |
itemsCustom |
||
| singleItem | 是否只顯示一張 | false |
itemsScaleUp |
||
| slideSpeed | 幻燈片切換速度，以毫秒爲單位 | 200 |
| paginationSpeed | 分頁切換速度，以毫秒爲單位 | 800 |
| rewindSpeed | 重回速度，以毫秒爲單位 | 1000 |
| autoPlay | 自動播放，可選布爾值或整數，若使用整數，如 3000，表示 3 秒切換一次；若設置爲 true，默認 5 秒切換一次 | false |
| stopOnHover | 鼠標懸停停止自動播放 | false |
| navigation | 顯示“上一個”、“下一個” | false |
| navigationText | 設置“上一個”、“下一個”文字，默認是[“prev”,”next”] | [“prev”,”next”] |
| rewindNav | 滑動到第一個 | true |
| scrollPerPage | 每頁滾動而不是每個項目滾動 | false |
| pagination | 顯示分頁 | true |
| paginationNumbers | 分頁按鈕顯示數字 | false |
responsive |
||
| responsiveRefreshRate | 每 200 毫秒檢測窗口寬度並做相應的調整，主要用於響應式 | 200 |
responsiveBaseWidth |
||
| baseClass | 添加 CSS，如果不需要，最好不要使用 | owl-carousel |
| theme | 主題樣式，可以自行添加以符合你的要求 | owl-theme |
| lazyLoad | 延遲加載 | false |
| lazyFollow | 當使用分頁時，如果跨頁瀏覽，將不加載跳過頁面的圖片，只加載所要顯示頁面的圖片，如果設置爲 false，則會加載跳過頁面的圖片。這是 lazyLoad 的子選項 | true |
| lazyEffect | 延遲加載圖片的顯示效果，默認以 400 毫秒淡入，若爲 false 則不使用效果 | fade |
| autoHeight | 自動使用高度 | false |
| jsonPath | JSON 文件路徑 | false |
| jsonSuccess | 處理自定義 JSON 格式的函數 | false |
| dragBeforeAnimFinish | 忽略過度是否完成（只限拖動） | true |
| mouseDrag | 關閉/開啓鼠標事件 | true |
| touchDrag | 關閉/開啓觸摸事件 | true |
| addClassActive | 給可見的項目加入 “active” 類 | false |
| transitionStyle | 添加 CSS3 過度效果 | false |
| beforeUpdate | 響應之後的回調函數 | false |
| afterUpdate | 響應之前的回調函數 | false |
| beforeInit | 初始化之前的回調函數 | false |
| afterInit | 初始化之後的回調函數 | false |
| beforeMove | 移動之前的回調函數 | false |
| afterMove | 移動之後的回調函數 | false |
| afterAction | 初始化之後的回調函數 | false |
| startDragging | 拖動的回調函數 | false |
| afterLazyLoad | 延遲加載之後的回調函數 | false |
| owl.prev | 到下一個 | owl.next |
| owl.play | 停止自動播放 | owl.stop |
| owl.goTo | 不使用動畫跳到第幾個 | owl.jumpTo |