jQuery幻燈片插件owlcarousel參數(shù)說明中文文檔
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的中文參數(shù)與api說明:
參數(shù) | 類型 | 默認值 | 說明 |
---|---|---|---|
items | 整數(shù) | 5 | 幻燈片每頁可見個數(shù) |
itemsDesktop | 數(shù)組 | [1199,4] | 設置瀏覽器寬度和幻燈片可見個數(shù),格式為[X,Y],X 為瀏覽器寬度,Y 為可見個數(shù),如[1199,4]就是如果瀏覽器寬度小于1199,每頁顯示 4 張,此參數(shù)主要用于響應式設計。也可以使用 false |
itemsDesktopSmall | 數(shù)組 | [979,3] | 同上 |
itemsTablet | 數(shù)組 | [768,2] | 同上 |
itemsTabletSmall | 數(shù)組 | false | 同上,默認為 false |
itemsMobile | 數(shù)組 | [479,1] | 同上 |
itemsCustom | 數(shù)組 | false | |
singleItem | 布爾值 | false | 是否只顯示一張 |
itemsScaleUp | 布爾值 | false | |
slideSpeed | 整數(shù) | 200 | 幻燈片切換速度,以毫秒為單位 |
paginationSpeed | 整數(shù) | 800 | 分頁切換速度,以毫秒為單位 |
rewindSpeed | 整數(shù) | 1000 | 重回速度,以毫秒為單位 |
autoPlay | 布爾值/整數(shù) | false | 自動播放,可選布爾值或整數(shù),若使用整數(shù),如 3000,表示 3 秒切換一次;若設置為 true,默認 5 秒切換一次 |
stopOnHover | 布爾值 | false | 鼠標懸停停止自動播放 |
navigation | 布爾值 | false | 顯示“上一個”、“下一個” |
navigationText | 數(shù)組 | [“prev”,”next”] | 設置“上一個”、“下一個”文字,默認是[“prev”,”next”] |
rewindNav | 布爾值 | true | 滑動到第一個 |
scrollPerPage | 布爾值 | false | 每頁滾動而不是每個項目滾動 |
pagination | 布爾值 | true | 顯示分頁 |
paginationNumbers | 布爾值 | false | 分頁按鈕顯示數(shù)字 |
responsive | 布爾值 | true | |
responsiveRefreshRate | 整數(shù) | 200 | 每 200 毫秒檢測窗口寬度并做相應的調(diào)整,主要用于響應式 |
responsiveBaseWidth | jQuery 選擇器 | window | |
baseClass | 字符串 | owl-carousel | 添加 CSS,如果不需要,最好不要使用 |
theme | 字符串 | owl-theme | 主題樣式,可以自行添加以符合你的要求 |
lazyLoad | 布爾值 | false | 延遲加載 |
lazyFollow | 布爾值 | true | 當使用分頁時,如果跨頁瀏覽,將不加載跳過頁面的圖片,只加載所要顯示頁面的圖片,如果設置為 false,則會加載跳過頁面的圖片。這是 lazyLoad 的子選項 |
lazyEffect | 布爾值/字符串 | fade | 延遲加載圖片的顯示效果,默認以 400 毫秒淡入,若為 false 則不使用效果 |
loop | 布爾值 | false | 無限循環(huán) |
autoHeight | 布爾值 | false | 自動使用高度 |
jsonPath | 字符串 | false | JSON 文件路徑 |
jsonSuccess | 函數(shù) | false | 處理自定義 JSON 格式的函數(shù) |
dragBeforeAnimFinish | 布爾值 | true | 忽略過度是否完成(只限拖動) |
mouseDrag | 布爾值 | true | 關閉/開啟鼠標事件 |
margin | 整數(shù) | 0 | 幻燈片間距 |
touchDrag | 布爾值 | true | 關閉/開啟觸摸事件 |
addClassActive | 布爾值 | false | 給可見的項目加入 “active” 類 |
transitionStyle | 字符串 | false | 添加 CSS3 過度效果 |
owlcarousel回調(diào)函數(shù)
變量 | 類型 | 默認值 | 說明 |
---|---|---|---|
beforeUpdate | 函數(shù) | false | 響應之后的回調(diào)函數(shù) |
afterUpdate | 函數(shù) | false | 響應之前的回調(diào)函數(shù) |
beforeInit | 函數(shù) | false | 初始化之前的回調(diào)函數(shù) |
afterInit | 函數(shù) | false | 初始化之后的回調(diào)函數(shù) |
beforeMove | 函數(shù) | false | 移動之前的回調(diào)函數(shù) |
afterMove | 函數(shù) | false | 移動之后的回調(diào)函數(shù) |
afterAction | 函數(shù) | false | 初始化之后的回調(diào)函數(shù) |
startDragging | 函數(shù) | false | 拖動的回調(diào)函數(shù) |
afterLazyLoad | 函數(shù) | false | 延遲加載之后的回調(diào)函數(shù) |
owlcarousel自定義事件
事件 | 說明 |
---|---|
owl.prev | 到上一個 |
owl.next | 到下一個 |
owl.play | 自動播放,可傳遞一個參數(shù)作為播放速度 |
owl.stop | 停止自動播放 |
owl.goTo | 跳到第幾個 |
owl.jumpTo | 不使用動畫跳到第幾個 |
以上既是jQuery幻燈片插件owlcarousel的中文參數(shù)說明與API,如果想修改owlcarousel的樣式可以查找owl.carousel.css文件中的對應CSS代碼
相關文章
LoadRunner調(diào)用JS加密后登錄實現(xiàn)
這篇文章主要為大家介紹了LoadRunner調(diào)用JS加密后登錄實現(xiàn)示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-06-06JS常用正則表達式超全集(密碼強度校驗,金額校驗,IE版本,IPv4,IPv6校驗)
網(wǎng)上有很多關于JS常用正則表達式的文章很全但今天為大家分享一些最新,且非常有用的正則表達式其中有密碼強度校驗,金額校驗,IE版本,IPv4,IPv6校驗等2020-02-02Servlet3.0與純javascript通過Ajax交互的實例詳解
Servlet與純javascript通過Ajax交互,對于很多人來說應該很簡單。不過還是寫寫,方便Ajax學習的后來者2018-03-03微信小程序 加載 app-service.js 錯誤解決方法
這篇文章主要介紹了微信小程序 加載 app-service.js 錯誤詳解的相關資料,在開發(fā)微信小程序過程中出現(xiàn)了app-services.js的錯誤,并解決此問題,需要的朋友可以參考下2016-10-10