jQuery幻燈片插件:OWL Carousel

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

兼容所有瀏覽器

支持響應式

支持 CSS3 過度

支持觸摸事件

支持 JSON 及自定義 JSON 格式

支持進度條

支持自定義事件

支持延遲加載

支持自適應高度

Owl Carousel 提供了眾多的參數、回調函數及自定義事件,所以它幾乎可以滿足你的所有要求。

兼容

瀏覽器兼容:兼容所有瀏覽器,包括 IE6、IE7。

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

使用方法

1、引入文件

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

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();
});

參數

參數類型默認值說明
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 毫秒檢測窗口寬度并做相應的調整,主要用于響應式
responsiveBaseWidthjQuery 選擇器window
baseClass字符串owl-carousel添加 CSS,如果不需要,最好不要使用
theme字符串owl-theme主題樣式,可以自行添加以符合你的要求
lazyLoad布爾值false延遲加載
lazyFollow布爾值true當使用分頁時,如果跨頁瀏覽,將不加載跳過頁面的圖片,只加載所要顯示頁面的圖片,如果設置為 false,則會加載跳過頁面的圖片。這是 lazyLoad 的子選項
lazyEffect布爾值/字符串fade延遲加載圖片的顯示效果,默認以 400 毫秒淡入,若為 false 則不使用效果
loop布爾值false無限循環
autoHeight布爾值false自動使用高度
jsonPath字符串falseJSON 文件路徑
jsonSuccess函數false處理自定義 JSON 格式的函數
dragBeforeAnimFinish布爾值true忽略過度是否完成(只限拖動)
mouseDrag布爾值true關閉/開啟鼠標事件
margin整數0幻燈片間距
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不使用動畫跳到第幾個

 

繼續閱讀
weinxin
關于本站
分享交流WordPress經驗與技巧,關注前端設計與網站制作。僅用于功能演示。
知更鳥
最佳 CSS 框架 Web前端

最佳 CSS 框架

在構建網站時,使用 CSS 框架是一個實時的節省,因為它為您提供了每個網頁設計師和前端開發人員在制作網站時需要的工具。 CSS 框架是一個軟件框架,它允許使用 HTML/CSS 進行更簡單、更符合標準...
line-height安卓中不垂直居中 Web前端

line-height安卓中不垂直居中

設計響應式網頁,PC端和移動端的樣式兼容性,很讓人撓頭,最常見的就是文字垂直不居中,而且蘋果手機和安卓手機下表現也不盡相同,往往蘋果手機是垂直居中的,但在安卓機上字卻靠上了,總是差那么一像素,應該是安...
js實時獲取瀏覽器窗口大小 Web前端

js實時獲取瀏覽器窗口大小

js實時獲取瀏覽器窗口大小,我們可以使用addEventListener()方法來實現。該addEventListener()方法可以注冊事件處理程序以偵聽瀏覽器窗口resize事件,例如window...
匿名

發表評論

匿名網友 填寫信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

評論:5   其中:訪客  5   博主  0
    • 小糊涂 小糊涂 3

      沙發

      • 嗯嗯不錯 嗯嗯不錯 3

        頂一個,我尊敬的鳥哥!

        • 大幺壹 大幺壹 0

          鳥哥,目前我的網站用本主題,但是我文章形式用的是“圖像”形式,但是文章頁面只要用到“圖像形式”的內容卡片上4張縮略圖均不顯示,這是為什么?我嘗試了將圖片調整為相同的尺寸,沒用!

          • 我要推廣網 我要推廣網 0

            學到了,