在網路上各種網站，例如：電商平台、公司網站、產品介紹網站…等，常常都會看到這種圖片輪播形式的呈現方式，今天透過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>