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

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

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

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

點此看範例網頁

一、Owl Carousel 簡介

1. 官網及版本

• https://owlcarousel2.github.io/OwlCarousel2/

目前最新版本為 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 檔案連結列表：

• https://cdnjs.com/libraries/OwlCarousel2

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

目前看到最新的版本是 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 效果：

• https://owlcarousel2.github.io/OwlCarousel2/demos/demos.html

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

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



接著在 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

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

DEMO 網頁

更多圖片展示工具：