用owl.carousel的JavaScript套件，做出輪播圖片的效果

9 6 月, 2021 發佈留言

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