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

在網路上各種網站,例如:電商平台、公司網站、產品介紹網站…等,常常都會看到這種圖片輪播形式的呈現方式,今天透過JavaScript的套件,也能輕鬆達到這樣的效果

Owl Carousel 2

這個工具是目前許多網站會使用的套件,效果是可以將圖片進行輪播,我自己覺得他的範本寫得非常清楚,官方文件也不會太難,而且彈性跟自由度很高,可以改非常多東西

網站連結

  • 紅框 Demos:裡面有網站自製的範例及程式碼
  • 籃框 Docs:這裡面有所有關於這套軟體的所有詳細使用說明
  • 黑框 Download:就是下載官方檔案包

安裝

再點進Docs之後,選擇Installation,裡面有詳細的安裝說明,是官方檔案包安裝,當然也可以透過CDN或npm來安裝

官方檔案安裝流程

在剛剛官網首頁右上角的導覽列已經有Download官方檔案包之後,解壓縮到你的檔案夾,並將資料夾改名為OwlCarousel

依照官網來說,檔案接下來要匯入CSS的兩個檔案,但下載後的資源包,檔案為只有點不一樣,所以要找到檔名為owl.carousel.min.cssowl.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>