owlcarousel是一款貓頭鷹旋轉木馬插件。OwlCarousel優勢相容所有瀏覽器支持響應式支持 CSS3 過度支持觸摸事件支持 JSON 及自定義 JSON 格式支持進度條支持自定義事件支持延遲載入支持自適應高度 線上實例 使用方法 複製 複製 參數詳解 itemsCustom itemsS ...
owlcarousel是一款貓頭鷹旋轉木馬插件。
OwlCarousel優勢
相容所有瀏覽器
支持響應式
支持 CSS3 過度
支持觸摸事件
支持 JSON 及自定義 JSON 格式
支持進度條
支持自定義事件
支持延遲載入
支持自適應高度
線上實例
| 預設 | 單個 | 自動播放 | 顯示上一張 | 自適應高度 |
| 延遲載入 | 載入JSON | 自定義JSON | 進度條 | 隨機顯示 |
使用方法
- <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>
- $(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 |
下載
