jQuery幻燈片外掛Owl Carousel外掛
阿新 • • 發佈:2018-11-17
簡介
Owl Carousel 是一個強大、實用但小巧的 jQuery 幻燈片外掛,它具有一下特點:- 相容所有瀏覽器
- 支援響應式
- 支援 CSS3 過度
- 支援觸控事件
- 支援 JSON 及自定義 JSON 格式
- 支援進度條
- 支援自定義事件
- 支援延遲載入
- 支援自適應高度
相容
瀏覽器相容:相容所有瀏覽器,包括 IE6、IE7。 jQuery 相容:相容 1.7 及以上版本。線上演示及下載
線上演示: http://www.jqhtml.com/wp-content/uploads/2017/05/wz/Owl Carousel/使用方法
引入檔案
<link href="css/owl.carousel.css" rel="stylesheet">
<link href="css/owl.theme.css" rel="stylesheet">
<script src="js/jquery.min.js"></script>
<script src="js/owl.carousel.js"></script>
HTML結構
<div id="owl-demo" class="owl-carousel"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div>8</div> </div>
JavaScript
$(function(){
$('#owl-example').owlCarousel();
});
引數
引數 | 型別 | 預設值 | 說明 |
---|---|---|---|
items | 整數 | 5 | 幻燈片每頁可見個數 |
itemsDesktop | 陣列 | [1199,4] | 設定瀏覽器寬度和幻燈片可見個數,格式為[X,Y],X 為瀏覽器寬度,Y 為可見個數,如[1199,4]就是如果瀏覽器寬度小於1199,每頁顯示 4 張,此引數主要用於響應式設計。也可以使用 false |
itemsDesktopSmall | 陣列 | [979,3] | 同上 |
itemsTablet | 陣列 | [768,2] | 同上 |
itemsTabletSmall | 陣列 | false | 同上,預設為 false |
itemsMobile | 陣列 | [479,1] | 同上 |
itemsCustom | 陣列 | false | |
singleItem | 布林值 | false | 是否只顯示一張 |
itemsScaleUp | 布林值 | false | |
slideSpeed | 整數 | 200 | 幻燈片切換速度,以毫秒為單位 |
paginationSpeed | 整數 | 800 | 分頁切換速度,以毫秒為單位 |
rewindSpeed | 整數 | 1000 | 重回速度,以毫秒為單位 |
autoPlay | 布林值/整數 | false | 自動播放,可選布林值或整數,若使用整數,如 3000,表示 3 秒切換一次;若設定為 true,預設 5 秒切換一次 |
stopOnHover | 布林值 | false | 滑鼠懸停停止自動播放 |
navigation | 布林值 | false | 顯示“上一個”、“下一個” |
navigationText | 陣列 | [“prev”,”next”] | 設定“上一個”、“下一個”文字,預設是[“prev”,”next”] |
rewindNav | 布林值 | true | 滑動到第一個 |
scrollPerPage | 布林值 | false | 每頁滾動而不是每個專案滾動 |
pagination | 布林值 | true | 顯示分頁 |
paginationNumbers | 布林值 | false | 分頁按鈕顯示數字 |
responsive | 布林值 | true | |
responsiveRefreshRate | 整數 | 200 | 每 200 毫秒檢測視窗寬度並做相應的調整,主要用於響應式 |
responsiveBaseWidth | jQuery 選擇器 | window | |
baseClass | 字串 | owl-carousel | 新增 CSS,如果不需要,最好不要使用 |
theme | 字串 | owl-theme | 主題樣式,可以自行新增以符合你的要求 |
lazyLoad | 布林值 | false | 延遲載入 |
lazyFollow | 布林值 | true | 當使用分頁時,如果跨頁瀏覽,將不載入跳過頁面的圖片,只加載所要顯示頁面的圖片,如果設定為 false,則會載入跳過頁面的圖片。這是 lazyLoad 的子選項 |
lazyEffect | 布林值/字串 | fade | 延遲載入圖片的顯示效果,預設以 400 毫秒淡入,若為 false 則不使用效果 |
autoHeight | 布林值 | false | 自動使用高度 |
jsonPath | 字串 | false | JSON 檔案路徑 |
jsonSuccess | 函式 | false | 處理自定義 JSON 格式的函式 |
dragBeforeAnimFinish | 布林值 | true | 忽略過度是否完成(只限拖動) |
mouseDrag | 布林值 | true | 關閉/開啟滑鼠事件 |
touchDrag | 布林值 | true | 關閉/開啟觸控事件 |
addClassActive | 布林值 | false | 給可見的專案加入 “active” 類 |
transitionStyle | 字串 | false | 新增 CSS3 過度效果 |
回撥函式
變數 | 型別 | 預設值 | 說明 |
---|---|---|---|
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 | 不使用動畫跳到第幾個 |