iT邦幫忙

2021 iThome 鐵人賽
DAY 20
1
Modern Web

快搭上姐姐的`微`前端便車系列 第 20 篇

第20車廂-你知道slick.js輪播套件可以這樣用？

13th鐵人賽 輪播 slick 網頁教學 jquery
18325 瀏覽

  • 分享至 

  • xImage
    •  

本篇介紹使用slick.js輪播套件應用在兩列以上的輪播功能以及介紹slickGoTo()方法

線上輪播套件有很多，自己常用的除了有slick，還有Owl Carousel及swiper，那今天主要介紹一下slick，如何使用兩列以上的輪播圖，以及他的方法可以實作在哪?

首先我們先來從官網挑選可以響應式的輪播範例

起手式(CDN)

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.css">

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.js"></script>

HTML

<div class="container bg-primary p-5">
  <h2>Responsive Display</h2>
  <div class="slider responsive">
    <div>
      <h3>1</h3>
      <img src="https://picsum.photos/200/200/?random=1" alt="">
    </div>
    <div>
      <h3>2</h3>
      <img src="https://picsum.photos/200/200/?random=1" alt="">
    </div>
    <div>
      <h3>3</h3>
      <img src="https://picsum.photos/200/200/?random=1" alt="">
    </div>
    <div>
      <h3>4</h3>
      <img src="https://picsum.photos/200/200/?random=1" alt="">
    </div>
        .....等
  </div>
</div>

JQ

$(".responsive").slick({
  dots: true,
  infinite: false,
  speed: 300,
  slidesToShow: 4,
  slidesToScroll: 4,
  responsive: [
    {
      breakpoint: 1024,
      settings: {
        slidesToShow: 3,
        slidesToScroll: 3,
        infinite: true,
        dots: true
      }
    },
    {
      breakpoint: 600,
      settings: {
        slidesToShow: 2,
        slidesToScroll: 2
      }
    },
    {
      breakpoint: 480,
      settings: {
        slidesToShow: 1,
        slidesToScroll: 1
      }
    }
  ]
});

程式碼

附上程式碼 .

其實只要複製貼上官網的範例，就完成啦！
備註:圖片有點奇怪，是因為沒設width喔！

不過你會不會想這麼簡單，我還需要你分享嘛！（怒/images/emoticon/emoticon09.gif

這位客棺您說的好，所以我今天要介紹的是，若你的需求是要兩列的怎麼辦？
像是我們在蝦皮看到的這種
https://ithelp.ithome.com.tw/upload/images/20211005/20142016rd18oXZ94r.jpg

其實呢，也是很簡單ＸＤ　（威

起手式同上

另外因為我需要做顏色或間距，我會用到bootstrap@4.6.0的class，所以這不是一定要引用的喔！

  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">

HTML

結構同上，class="w-100"只是要做圖片width100%;

    <h1>原始row方法</h1>
    <div class="sliderRow">
      <!-- This will be considered one slide -->
      <div>    
          <h1>1</h1>
          <img src="https://picsum.photos/200/200/?random=1" class="w-100">
      </div>
      <!-- The second slide -->
      <div>
        <h1>2</h1>
        <img src="https://picsum.photos/200/200/?random=1" class="w-100">
      </div>
      <!-- The three slide -->
      <div>
        <h1>3</h1>
              <img src="https://picsum.photos/200/200/?random=1" class="w-100">
      </div>
      ．．．等
    </div>

ｍａｇｉｃ來囉～怎麼變２列呢？

https://ithelp.ithome.com.tw/upload/images/20211005/20142016Ldle8S95pZ.png

JQ

只要加上rows這個參數就可以改變囉

  $(".sliderRow").slick({
    rows: 2,　//列數
    infinite: false,
    slidesToShow: 4,
    slidesToScroll: 1,
    dots: true, // 指示点　預設為 false
});

這樣就完成啦！

btn，你可能又想，就只是下一個參數這麼簡單!還要你教?


先別激動～
我們先一樣看一下上方完成圖，雖然是完成了，可是我想要變成
1.2.3.4 之後換行 5.6.7.8可以嗎?，因為官方參數我是看不到要怎麼做，所以後來我的解法是

HTML

注意:我這邊結構不同喔!

  • 透過d-flex將每個col(圖片區域)併排喔！
    <h1>自製兩行</h1>
    <div class="sliderTwo">
        <!-- This will be considered one slide -->
        <div>    
          <div class="d-flex">
              <div class="col-sm">
                <h1>1</h1>
                <img src="https://fakeimg.pl/200x200/#ccc" class="w-100">
              </div>
              <div class="col-sm">
                <h1>2</h1>
                <img src="https://fakeimg.pl/200x200/#ccc" class="w-100">
              </div>
              <div class="col-sm">
                <h1>3</h1>
                <img src="https://fakeimg.pl/200x200/#ccc" class="w-100">
              </div>
              <div class="col-sm">
                <h1>4</h1>
                <img src="https://fakeimg.pl/200x200/#ccc" class="w-100">
              </div>
            </div>
        </div>
        <!-- The second slide -->
        <div>
          <div class="d-flex">
            <div class="col-sm">
              <h1>5</h1>
              <img src="https://fakeimg.pl/200x200/#ccc" class="w-100">
            </div>
            <div class="col-sm">
              <h1>6</h1>
              <img src="https://fakeimg.pl/200x200/#ccc" class="w-100">
            </div>
            <div class="col-sm">
              <h1>7</h1>
              <img src="https://fakeimg.pl/200x200/#ccc" class="w-100">
            </div>
            <div class="col-sm">
              <h1>8</h1>
              <img src="https://fakeimg.pl/200x200/#ccc" class="w-100">
            </div>
          </div>
        </div>
        <!-- The three slide -->
        <div>
          <div class="d-flex">
            <div class="col-sm">
              <h1>9</h1>
              <img src="https://fakeimg.pl/200x200/#ccc" class="w-100">
            </div>
            <div class="col-sm">
              <h1>10</h1>
              <img src="https://fakeimg.pl/200x200/#ccc" class="w-100">
            </div>
            <div class="col-sm">
              <h1>11</h1>
              <img src="https://fakeimg.pl/200x200/#ccc" class="w-100">
            </div>
            <div class="col-sm">
              <h1>12</h1>
              <img src="https://fakeimg.pl/200x200/#ccc" class="w-100">
            </div>
          </div>
        </div>
    </div>

JQ

注意:我這邊跟上面不同 slidesToShow: 1, //改為秀1張喔，只是1張包了4張照片

  $('.sliderTwo').slick({
    rows: 2,
    infinite: false,
    slidesToShow: 1, //改為秀一張喔
    slidesToScroll: 1,
    dots: true, // 預設 false 指示点
});

這樣就完成啦！
https://ithelp.ithome.com.tw/upload/images/20211005/201420166QxUuVabGf.jpg

最後再補一張HTML結構不同處
https://ithelp.ithome.com.tw/upload/images/20211005/20142016eV0IbzpTTD.png
好的！那這樣就完成啦！

那最後，在介紹slick有一個方法叫slickGoTo()，我覺得很好用！至於怎麼用呢？可以看我以下範例

你知道slickGoTo()怎麼用？

方法 | 參數 | 說明
------------- | -------------|
slickGoTo | number(slide數)，boolean(是否動畫) | 按索引導航到幻燈片

你有沒有看過這種商品頁，點了某個顏色，就可以跳到那個顏色的商品？這是怎麼做的？
我發現使用slickGoTo()方法，就可以輕鬆達到囉！

▼完成圖如下

起手式同上

HTML

    <h1>商品頁</h1>
    <div class="row p-2" style="background-color:#EEEEEE">
      <div class="col-md-6">
        <div class="slider slider-for">
          <div>
            <img class="w-100" src="https://static.daf-shoes.com/01/b6/01b611fd23e88105b6db3a2523e5b4c7.webp" alt="" >
          </div>
          <div>

            <img class="w-100" src="https://static.daf-shoes.com/54/1f/541f8d6099ee5635219d0ddd58ea86ec.webp" alt="">
          </div>
          <div>

            <img class="w-100" src="https://static.daf-shoes.com/14/78/1478540b856e320b9aaddbfd3329daf9.webp" alt="">
          </div>
          <div>

            <img class="w-100" src="https://static.daf-shoes.com/38/80/38804e42a00788032df5f087e2ae223e.webp" alt="">
          </div>
          <div>

            <img class="w-100" src="https://static.daf-shoes.com/92/19/921996f0014c683ff911ce7f8bcdbd7d.webp" alt="">
          </div>
        </div>
        <div class="slider slider-nav" >
          <div>
     
            <img class="w-100" src="https://static.daf-shoes.com/01/b6/01b611fd23e88105b6db3a2523e5b4c7.webp" alt="">
          </div>
          <div>
   
            <img class="w-100" src="https://static.daf-shoes.com/54/1f/541f8d6099ee5635219d0ddd58ea86ec.webp" alt="">
          </div>
          <div>
    
            <img class="w-100" src="https://static.daf-shoes.com/14/78/1478540b856e320b9aaddbfd3329daf9.webp" alt="">
          </div>
          <div>

            <img class="w-100" src="https://static.daf-shoes.com/38/80/38804e42a00788032df5f087e2ae223e.webp" alt="">
          </div>
          <div>
           <img class="w-100" src="https://static.daf-shoes.com/92/19/921996f0014c683ff911ce7f8bcdbd7d.webp" alt="">
          </div>
        </div>
    
      </div>
      <div class="col-md-6">
        <h2>舒適首選．豆豆鞋</h2>
        <div class="row">
          <div class="col-auto">
            <p>顏色</p>
          </div>
          <div class="col">
            <button type="button" class="btn btn-outline-primary" onclick="slickGoTo(0)">白</button>
            <button type="button" class="btn btn-outline-primary" onclick="slickGoTo(1)">黑</button>
              <button type="button" class="btn btn-outline-primary" onclick="slickGoTo(2)">黃</button>

          </div>

        </div>
      </div>
    </div>

JQ

  $('.slider-for').slick({
    slidesToShow: 1, //預設 1 幻燈片顯示幾張
    slidesToScroll: 1,//預設 1 幻灯片每次滑動幾張
    arrows: false, // 預設 true 左右箭頭是否顯示
    fade: true, // 預設 false 淡入淡出
    asNavFor: '.slider-nav'//將滑塊設置為其他滑塊的導航（類或ID名稱）,適用於多個輪播圖共用一個導航
  });

  $('.slider-nav').slick({
    slidesToShow: 3,
    slidesToScroll: 1,
    asNavFor: '.slider-for',
    dots: true, // 預設 false 指示点
    arrows: false, // 預設 true 左右箭頭是否顯示
    focusOnSelect: true // 預設 false
  });
    
});

function slickGoTo(key){
  $('.slider-nav').slick('slickGoTo', key);
}

參考架構

是參考官網的這組喔！
https://ithelp.ithome.com.tw/upload/images/20211005/20142016ZUjgfrGHPJ.jpg

程式碼

附上程式碼

整體slick參數配置

可參考這篇
https://xiechengyu.github.io/2019/05/29/sclick%E7%9A%84%E9%85%8D%E7%BD%AE/

那今天就先到這拉！
/images/emoticon/emoticon13.gif


上一篇
第19車廂-娃！網頁必備的響應式輪播效果怎麼刻？
下一篇
第21車廂-input全選/取消全選功能底加啦！
系列文
快搭上姐姐的`微`前端便車 共 30 篇
  1. 26
    第26車廂-眼睛眨啊眨~登入密碼的顯示/隱藏應用篇
  2. 27
    第27車廂-關於訊息視窗:bootstrap5Model應用篇
  3. 28
    第28車廂-vw很好用我知道!但不小心就踩雷捏！
  4. 29
    第29車廂-倒數一篇！人人有獎～抽獎抽起來了各位！
  5. 30
    第30車廂-各位乘客們，我們到站啦！
完整目錄
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言
iThome鐵人賽
參賽組數
1123 組
團體組數
52 組
累計文章數
23096 篇
完賽人數
656 人
iT+看影片追技術 看影片追技術 看更多
熱門tag 看更多
15th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽 鐵人賽 2019鐵人賽 2018鐵人賽 javascript 2017鐵人賽 python windows php c# windows server linux css 程式設計 react vue.js
熱門問題
熱門回答
熱門文章
IT邦幫忙