2016年4月15日

最熱門 jQuery 圖片輪播外掛 Owl Carousel﹍CDN 安裝懶人包

A+
owl-carousel-2-最熱門 jQuery 圖片輪播外掛 Owl Carousel﹍CDN 安裝懶人包Owl Carousel」可說是使用率最高的圖片輪播外掛,許多免費、付費下載的網頁模版或部落格範本,都是內建這個輪播效果。主要原因可能是行動裝置普及後,「Owl Carousel」不但可顯示自適應(RWD)版面,還支援手指觸摸操作的效果,可輕易地在手機直接用手勢滑動輪播圖片,效果十分強大。

過去曾介紹「Camera」這個 jQuery 輪播外掛,其功能強大的地方在於各種過場特效,而跟「Owl Carousel」相比除了欠缺手勢操控支援,最麻煩的地方跟多數輪播外掛一樣,都需要自行下載安裝檔案,再上傳到自己的雲端空間(且必須是支援 "目錄結構" 的空間),光是這個流程就會讓許多部落格站長頭痛了。更糟糕的是,「Google Drive 檔案外連功能將於 2016 年 8 月關閉」,現在再也找不到比較簡便的 "目錄型" 雲端空間了,若想要使用 "目錄型" 的雲端空間都得花一番手腳。(可參考「 徹底解決網站外連空間問題」→ 「支援目錄路徑的雲端空間」)

本篇介紹的「Owl Carousel」,最棒的是有 CDN 支援,我們將不用再下載檔案及上傳到網路空間,可直接引用 CDN 的檔案外連,這是所有其他輪播外掛難以望其項背的一點。以下就來介紹安裝方法及提供範例說明。




一、Owl Carousel 簡介


1. 官網及版本


目前最新版本為 V2,而多數網路上的範本,內建的 Owl Carousel 都是 V1,語法跟 V2 略有不同,如果拿 V2 的使用說明來套可能沒有作用,建議讀者先弄清楚版本,或是乾脆直接移除 V1、安裝 V2 版。


2. 功能

以下是 Owl Carousel 的功能特點:

  • 自適應版面
  • 支援多種特殊輪播模式(例如由右到左、錨點操控、從螢幕中央開始輪播)
  • 可循環輪播
  • 一個畫面可一次輪播數張圖片
  • 可用滑鼠、手勢來拖拉圖片
  • 可輪播 Youtube 影片
  • 可自訂各種參數、提供 API
  • 免費、可商業使用

Owl Carousel 也有支援基本的過場效果,不過沒有「Camera」的預設功能強大。由於官方提供了 API,會寫程式的話,可以自行套用 API 來延伸各種應用。


3. API 說明書

要讓 Owl Carousel 能隨心所欲出現自己想要的效果,那麼得熟悉 HTML/JS/CSS 語法及運用,並請參考官方的「API 說明書」頁面,瞭解各種參數如何調用。

同時官方也提供了一些內建的外掛效果,可參考「外掛說明書」,做出更強大的效果。




二、CDN 安裝方式


1. CDNJS

這是知名的 CDN 服務「CDNJS」所提供的 Owl Carousel V2 檔案連結列表:


cdnjs-owl-carousel-v2-最熱門 jQuery 圖片輪播外掛 Owl Carousel﹍CDN 安裝懶人包

如果要引用特定檔案,可直接複製連結。

目前看到最新的版本是 2.0.0-beta.3,但是經 WFU 測試後 CSS 會有問題,請使用圖中看到的 2.0.0-beta.2.4 版本


2. 安裝懶人包

如不知道要引用哪些檔案,可直接使用以下整理好的連結。

在修改範本之前,如果第一次安裝本站工具的讀者,建議先閱讀「備份範本的訣竅」系列文章。

以 Blogger 為例,請到後台「範本」→「編輯 HTML」,游標點進範本區塊,按 Ctrl-F 搜尋 </head> 這個字串,找到後在此字串的前一行,插入以下程式碼:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.0.0-beta.2.4/assets/owl.carousel.min.css"></link>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.0.0-beta.2.4/assets/owl.theme.default.min.css"></link>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.0.0-beta.2.4/owl.carousel.min.js"></script>

綠色字串可參考「引用 jQuery 的注意事項」,檢查範本是否已安裝過 jQuery,如果已經安裝過請刪除此行,以免重複安裝。

存檔後即完成所有需要檔案的連結引用,接下來要說名如何放輪播內容的 HTML 碼,以及執行輪播的參數設定。



三、各種 DEMO 效果


官方網站很貼心地整理了各種 DEMO 效果:


owl-carousel-demo-最熱門 jQuery 圖片輪播外掛 Owl Carousel﹍CDN 安裝懶人包

且點進個別頁面後,都會列出該效果的 HTML 碼,以及對應輪播的參數設定,所以其實很好套用。

以「Basic」這個效果來舉例,請將這個頁面提供的 HTML 碼放在網頁你想顯示的地方:

owl-carousel-demo-html-最熱門 jQuery 圖片輪播外掛 Owl Carousel﹍CDN 安裝懶人包

接著在 HTML 碼的後面,放官方提供的執行參數,例如以下的 JS 碼(請比對這個 DEMO 頁面,瞭解與以下 JS 碼的差別):

<script>
$('.owl-carousel').owlCarousel({
loop: true,
margin: 10,
nav: true,
responsive: {
0: {
items: 1
},
600: {
items: 3
},
1000: {
items: 5
}
}
})
</script>

儲存後,就能看到跟官方網頁一樣的效果。



四、自動輪播範例


圖片自動輪播是首頁常見的特效,以下就利用 Owl Carousel 提供一個範例,看看這個效果怎麼做出來的。請在想要顯示圖片輪播的地方,插入以下程式碼:


以下參數修改請參照以上程式碼行號:

B~D:這三行的紅色字串是每個輪播項目的格式,可複製這三行的格式來新增項目。藍色字串請分別填入連結網址及圖片網址。

E~M:這裡有三個項目的 HTML 碼範例。

Q:可更改一次輪播的項目

R:如不需要循環輪播則改為 false

S:可更改與右邊圖片的距離

T:如不需要導航文字則改為 false

U:如不需要自動輪播則改為 false

V:設定切換時間,1000 代表 1 秒鐘

W:如不需要 "滑鼠經過時暫停" 則改為 false

以上程式碼及參數的效果,請看範例網頁:




更多 jQuery 網頁效果:

2 則留言:

  1. 請問,owl carousel可以依按照星期播放圖片嗎?例如,星期一播放pic1,2,3, 星期二播放pic4,5,6....以此類推。謝謝。辛苦了。

    回覆刪除
    回覆
    1. 特殊的客製需求,要寫客製程式才可以喔

      刪除

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
提問請附網址、詳細描述狀況,如提供的資訊不足,則無法回覆。
◎ 請在相關文章留言,與文章無關的主題請至「Blogger 中文論壇」。
◎ 若詢問 CSS 、非官方範本問題、或貴站為商業網站 ,請參考「本站諮詢頁面」→「1. 諮詢服務」
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 若發現留言不見了,通常是因為 "複製貼上" 的內容常被系統判定為垃圾留言,請不用擔心,我會定期將留言恢復。
◎ 本站「已關閉自刪留言功能」。