使用slick建立簡單的slider(Carousel)輪播

Slick.js 讓製作網頁輪播的效果(Carousel)更輕鬆

slick.js官網連結

Step1:加入slick.css

<link rel="stylesheet" href="slick/slick/slick.css">
<link rel="stylesheet" href="slick/slick/slick-theme.css">

Step2:加入slick.js及自訂條件

<script src="slick/slick/slick.js"></script>

$('.slick').slick({
    dots: true,             //顯示輪播圖片會顯示圓圈
    infinite: true,         //重覆輪播
    slidesToShow:3,         //輪播顯示個數
    slidesToScroll: 3,      //輪播捲動個數
    autoplay: true,         //autoplay : 自動播放
    responsive: [

    {
      breakpoint: 1000,
      settings: {
          slidesToShow: 2,
          slidesToScroll: 2,
          arrows:false
      }
    },
    {
      breakpoint: 480,
      settings: {
          slidesToShow: 1,
          slidesToScroll: 1,
          arrows:false
      }
    }]
});

Step3:欲加入slider的父元素加【class=”slick”】

<div class="slick">
    <img src="images/gril01.jpg" alt="">
    <img src="images/gril02.jpg" alt="">
    <img src="images/gril03.jpg" alt="">
    <img src="images/gril04.jpg" alt="">
    <img src="images/gril05.jpg" alt="">
</div>

Step4:自行CSS美化

.slick-prev {
    left: -50px;
}
.slick-prev:before, .slick-next:before {
    font-size: 50px;
    color: #8d0404;
}