Owl Carousel 2 基本使用方法 (javascript 輪播套件)

Nov 16, 2020 by Hsiangming Lo

Owl Carousel 2 是一個簡易使用的輪播js套件，只要在網頁中加入一些語法即可加入輪播，可根據需要輪播圖片或圖文區塊等...

加入 jquery 和 Owl Carousel 2 的 js 和 css。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<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">

在元素中加入 “owl-carousel”, “owl-theme” 這兩個 class。

<div class="owl-carousel owl-theme">
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
</div>

在元素後面加入 script，讓程式開始動作。

<script>
  $('.owl-carousel').owlCarousel({
    loop:true,
    margin:10,
    nav:true,
    dots:true,
    responsive:{
      0:{
        items:1
      },
      600:{
        items:3
      },
      1000:{
        items:5
      }
    }
  })
</script>

更多 Owl Carousel 2 使用方法與參數可參考： Owl Carousel 2