在網路上各種網站,例如:電商平台、公司網站、產品介紹網站…等,常常都會看到這種圖片輪播形式的呈現方式,今天透過JavaScript的套件,也能輕鬆達到這樣的效果
內容目錄
1
2
3
4
5
6
Owl Carousel 2
這個工具是目前許多網站會使用的套件,效果是可以將圖片進行輪播,我自己覺得他的範本寫得非常清楚,官方文件也不會太難,而且彈性跟自由度很高,可以改非常多東西

- 紅框 Demos:裡面有網站自製的範例及程式碼
- 籃框 Docs:這裡面有所有關於這套軟體的所有詳細使用說明
- 黑框 Download:就是下載官方檔案包
安裝
再點進Docs之後,選擇Installation,裡面有詳細的安裝說明,是官方檔案包安裝,當然也可以透過CDN或npm來安裝
官方檔案安裝流程
在剛剛官網首頁右上角的導覽列已經有Download官方檔案包之後,解壓縮到你的檔案夾,並將資料夾改名為OwlCarousel

依照官網來說,檔案接下來要匯入CSS的兩個檔案,但下載後的資源包,檔案為只有點不一樣,所以要找到檔名為owl.carousel.min.css跟owl.theme.default.min.css
而我找到的位置在
- ./dist/assets/owl.carousel.min.css
- ./dist/assets/owl.theme.default.min.css


接下來安裝JavaScript,這裡特別提到因為是使用jQuery的套件支援,所以順序不能搞錯,要先有jQuery檔案匯入再匯入owl-carousel檔案,共兩個檔案
我找到的檔案位置為
- ./OwlCarousel/docs_src/assets/vendors/jquery.min.js
- ./OwlCarousel/dist/owl.carousel.min.js


CDN安裝流程
從官網看到需要四個檔案,分別為兩個CSS跟兩個JS檔
- owl.carousel.min.css
- owl.theme.default.min.css
- jquery.min.js
- owl.carousel.min.js
我們可直接透過CDN去安裝,方便我們快速開發


匯入範本
接下來的動作,測試我們有沒有安裝成功,直接把最簡單的範本匯入看看有沒有顯示,安裝頁面的文件下面有提到基本HTML設定,但並不是完整的例子,我們直接回到首頁的Demo選basic直接使用裡面的範本



完整程式碼為這樣,head放入CDN的安裝檔,body放入官方設置的HTML跟JS設定
<head>
<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css”>
<link rel=”stylesheet”
href=”https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css”>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js”></script>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js”></script>
</head>
<body>
<div class=”owl-carousel owl-theme”>
<div class=”item”>
<h4>1</h4>
</div>
<div class=”item”>
<h4>2</h4>
</div>
<div class=”item”>
<h4>3</h4>
</div>
<div class=”item”>
<h4>4</h4>
</div>
<div class=”item”>
<h4>5</h4>
</div>
<div class=”item”>
<h4>6</h4>
</div>
</div>
</div>
<script>
$(‘.owl-carousel’).owlCarousel({
loop: true,
margin: 10,
nav: true,
responsive: {
0: {
items: 1
},
600: {
items: 3
},
1000: {
items: 5
}
}
})
</script>
</body>
</html>
呈現這樣畫面就成功了

加入CSS的話,可以讓畫面更好看一點,在head加入style,更改一下CSS

<style>
.item {
background: #4DC7A0;
width: 100%;
height: 100%;
}
.item h4 {
color: #FFF;
font-size: 30px;
padding: 20px 0 0 30px;
}
</style>
修改為客製化
根據官方文件有針對每一個元件的控制方式,做一些說明
像是API中的option是針對JS中的屬性進行修改

items
以items為例,他的型態為數字,所以只能輸入數字,預設為3,就是三個視窗呈現例如剛剛的範例,我都將items改為3
補充說明:為什麼有0、600、100是針對響應式設計,就是說針對不同大小的畫面進行呈現
針對響應式可以參考這篇文章

<script>
$(‘.owl-carousel’).owlCarousel({
loop: true,
margin: 10,
nav: true,
responsive: {
0: {
items: 3
},
600: {
items: 3
},
1000: {
items: 3
}
}
})
</script>
margin
再舉個例子margin他寫型態為數字、預設是0、說明是說,他是針對margin-right,就是只有增加右邊的邊距
接續剛剛例子,我們把margin改為50,那每個圖片的距離就會被拉開

<script>
$(‘.owl-carousel’).owlCarousel({
loop: true,
margin: 50,
nav: true,
responsive: {
0: {
items: 3
},
600: {
items: 3
},
1000: {
items: 3
}
}
})
</script>