NPM小工具｜ Slick套用與常用設定

在先前的文章中，介紹了幾款JS常用的Slider，其中Slick一直是我的首選套件，在轉用Webpack開發網頁後，Slick的設定就是常駐的開發小工具了，這篇文章將帶大家從嵌入式的開發無痛轉移到NPM上的Slick設定了！

Slick套用

1. 首先，需要在package.json中加入slick-carousel，使用npm安裝slick-carousel

npm i slick-carousel -s

2.在需要引入Slick的頁面JS中加入

import slick from ‘slick-carousel’;

框架的JS引用方式和先前的做法一樣是

$(function(){
   $('.slider').slick({
      dots: true,
   });
})

3.基本的Slick CSS樣式表引入方式則是引入cdnjs上的樣式表

<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css"/>
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.css"/>

簡單的三步驟，基本的Slick設定就完成囉！

Slick常用設定

Slick的CSS設定檔：Slick基本上會修改的CSS有下面幾項

1. 上、下箭頭的樣式設定

.slick-prev,.slick-next
   width 40px
   height 40px
.slick-prev
   background-image url(../)
   &:hover,&:focus
      background-image url(../)
.slick-next
   background-image url(../)
   &:hover,&:focus
      background-image url(../)

2. 項目點點的樣式設定

.slick-dots
   li
      button
         &:before
            opacity 1
            color: $gray
      &.slick-active,&:hover
         button
            &:before
               opacity 1
               color: $yellow

Slick的JS設定檔：最常使用的8個設定值如下

$(function(){
   $('.slider').slick({
      dots: true, //項目點點，預設為false
      arrows: true, //上下箭頭，預設為true
      autoplay: true, //自動撥放
      autoplaySpeed: 500, //自動撥放的切換速率，單位毫秒
      speed: 500, //切換速率，單位毫秒
      easing: 'linear', //滑動效果頻率，和animate設定值一樣，預設為linear
      fade: true, //切換改為fadeIn方式，預設為false
      infinite: true, //是否要loop，預設為true
   });
})

Slick 多區塊小功能與RWD設定

Slick的多區塊小功能與RWD設定：只需要在設定檔中加入參數，就可以輕鬆RWD囉！

1.分成多個區塊

$(function(){
   $('.slider').slick({
        slidesToShow: 4, //一次顯示4個
        slidesToScroll: 4, //切換下一頁時移動4個
   });
})

2.RWD設定

$(function(){
   $('.slider').slick({
        slidesToShow: 4, //一次顯示4個
        slidesToScroll: 4, //切換下一頁時移動4個
        responsive: [
          {
              breakpoint: 1024, // RWD在1024寬度時切換顯示數量
              settings: {
                  slidesToShow: 3, //一次顯示3個
                  slidesToScroll: 3,//切換下一頁時移動3個
             }
         },{
              breakpoint: 600,// RWD在600寬度時切換顯示數量
              settings: {
                  slidesToShow: 2,//一次顯示2個
                  slidesToScroll: 2,//切換下一頁時移動2個
             }
         },
        ]
   });
})

更多Slick的設定值可以參考官網介紹，希望本篇文章可以幫助使用npm安裝Slick的人更了解如何設定！