文章彙整

前端開發:解決slider js垂直滑動時出現的高度問題

Astral WebBy Astral Web 1 month agoNo Comments
首頁  /  網站技術與設計  /  前端開發  /  前端開發:解決slider js垂直滑動時出現的高度問題

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,也可以電子報,就不會錯過任何第一手新知分享囉!若有問題,也歡迎隨時與我們聯繫

 000

歐斯瑞

歐斯瑞 - 一個對網路世界充滿熱情的團隊

歐斯瑞提供免費電商知識,並協助各大類型之企業 電商諮詢建置MagentoShopify 相關的電商專案。

立即聯繫我們

推薦文章

Categories:
  前端開發網站技術與設計

留下回應

你的電子郵件地址不會被公開.