jQuery幻燈片插件owlcarousel參數說明中文文檔

2019-11-19 14:17:30

字體：大中小

來源：轉載

供稿：網友

Owl Carousel 是一個強大、實用但小巧的 jQuery 幻燈片插件，它具有一下特點：

兼容所有瀏覽器
支持響應式
支持 CSS3 過度
支持觸摸事件
支持 JSON 及自定義 JSON 格式
支持進度條
支持自定義事件
支持延遲加載
支持自適應高度

瀏覽器兼容：兼容所有瀏覽器，包括 IE6、IE7。

jQuery 兼容：兼容 1.7 及以上版本。

Owl Carousel 使用方法：

新建一個HTML文件

1、在HTML文件中引入Owl Carousel必須文件

<link href="css/owl.carousel.css" rel="external nofollow" rel="stylesheet"><link href="css/owl.theme.css" rel="external nofollow" rel="stylesheet"><script src="js/jquery.min.js"></script><script src="js/owl.carousel.js"></script>

2、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>

3、JavaScript

$(function(){ $('#owl-example').owlCarousel();});

下面是Owl Carousel的中文參數與api說明：

參數	類型	默認值	說明
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 則不使用效果
loop	布爾值	false	無限循環
autoHeight	布爾值	false	自動使用高度
jsonPath	字符串	false	JSON 文件路徑
jsonSuccess	函數	false	處理自定義 JSON 格式的函數
dragBeforeAnimFinish	布爾值	true	忽略過度是否完成（只限拖動）
mouseDrag	布爾值	true	關閉/開啟鼠標事件
margin	整數	0	幻燈片間距
touchDrag	布爾值	true	關閉/開啟觸摸事件
addClassActive	布爾值	false	給可見的項目加入 “active” 類
transitionStyle	字符串	false	添加 CSS3 過度效果

owlcarousel回調函數

變量	類型	默認值	說明
beforeUpdate	函數	false	響應之后的回調函數
afterUpdate	函數	false	響應之前的回調函數
beforeInit	函數	false	初始化之前的回調函數
afterInit	函數	false	初始化之后的回調函數
beforeMove	函數	false	移動之前的回調函數
afterMove	函數	false	移動之后的回調函數
afterAction	函數	false	初始化之后的回調函數
startDragging	函數	false	拖動的回調函數
afterLazyLoad	函數	false	延遲加載之后的回調函數

owlcarousel自定義事件

事件	說明
owl.prev	到上一個
owl.next	到下一個
owl.play	自動播放，可傳遞一個參數作為播放速度
owl.stop	停止自動播放
owl.goTo	跳到第幾個
owl.jumpTo	不使用動畫跳到第幾個