slick js 是一個相當好用的輪播套件，Magento2 page builder裡的slider也是使用這個套件來實現輪播的效果。

這篇文章要跟大家分享的是：如何使用slick js 製作上下滾動的滑塊，以及如何解決垂直滑動時出現的高度問題呦！

Slick js的基本應用

載入所需的CSS及Javascript

<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/[email protected]/slick/slick.css"/>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.js"></script>

準備HTML

<div class="slider">
  <div>
    <p>123<br>456</p>
  </div>
  <div>
    <p>abcdefg</p>
  </div>
  <div>
    <p>BC</p>
  </div>
  <div>
    <p>DEF</p>
  </div>
  <div>
    <p>5</p>
  </div>
  <div>
    <p>6</p>
  </div>
</div>

設定基本的slider

$('.slider').slick({
  slidesToShow: 1,
  slidesToScroll: 1,
  autoplay: true,
  autoplaySpeed: 2000,    
});

設定垂直滑動的slider

如果想要設置垂直滑動的slider，只要加上 vertical: true 就可以了

$('.slider').slick({
  slidesToShow: 1,
  slidesToScroll: 1,
  autoplay: true,
  autoplaySpeed: 2000,    
  vertical: true,
});

Slick js垂直滑動的問題

Slick js 垂直滑動會以第一組資料的高度來當作每次滑動的高度，因此如果資料的高度不同時，他就沒有辦法乖乖的一次滑動一組資料。解決的方式就是讓每組資料的高度統一。底下示範如何使用javascript來調整每組資料的高度。

function equalheight() {
    $('.slider').each(function (index) {
        var maxHeight = 0;
        $(this).find('.slick-slide').height('auto');
        $(this).find('.slick-slide').each(function (index) {
            if ($(this).height() > maxHeight)
                maxHeight = $(this).height();
        });
        $(this).find('.slick-slide').height(maxHeight);
    });
}
 
// slider 
$('.slider').on('init', function(event, slick){
  equalheight();
});
 
 
$('.slider').slick({
  slidesToShow: 1,
  slidesToScroll: 1,
  autoplay: true,
  autoplaySpeed: 2000,    
  vertical: true,
});

這一段的作法是在 slick js初始化之後、找到所有資料的"最高高度"，並統一將所有的資料高度統一為"最高高度"。

如果您需要更多Slick js的資料、請參考：https://kenwheeler.github.io/slick/
文章中的sample code請參考：https://codepen.io/ellen-shih/pen/YzEdYbv

 

本篇的分享，希望能幫助到各位讀者們～想瞭解更多有關前端開發的知識，千萬別忘了追蹤歐斯瑞FB粉絲團及IG，也可以電子報，就不會錯過任何第一手新知分享囉！若有問題，也歡迎隨時與我們聯繫。