显示 2 张幻灯片时，光滑的旋转木马自适应高度不起作用

Question

我正在建立一个带有一些滑块的网站，并为此使用Slick。通常，对于幻灯片，当我一次显示 1 张幻灯片时，自适应高度有效，但当同时显示 2 张幻灯片时，它不起作用。这是JSFiddle中复制的问题。这是 JavaScript：var options = {  slidesToShow: 2,  slidesToScroll: 2,  dots: true,  arrows: false,  dotsClass: 'slick-dots slick-dots-black',  adaptiveHeight: true,};$('.slider').slick(options);我一直在谷歌搜索这个问题，似乎其他人也有类似的问题，但我找不到解决方案。任何想法表示赞赏！

Answer 1

是的，看起来 slick 只允许adaptiveHeight在单个滑动轮播上使用。

在它的文档adaptiveHeight中说这个......

启用单幻灯片水平轮播的自适应高度。

有趣的是，我从没想过 slick 会有这种行为，我假设自适应高度在所有情况下都有效。但显然不是。

这有点 hacky，但可能涵盖您网站的解决方案，以在多幻灯片滑块上启用自适应高度。这基本上找到了当前显示的最高幻灯片，并为.slick-list. 在这个元素上使用 css transition 会产生光滑的adaptiveHeight效果。

我们还有一个.on('resize')事件会重新运行滑块高度检查，以防幻灯片内容流动并且幻灯片高度响应变化。

阅读我在脚本中的评论，看看发生了什么......

另请参阅此处的小提琴... https://jsfiddle.net/joshmoto/1a5vwr3j/

// my slick slider options

var options = {

  slidesToShow: 2,

  slidesToScroll: 2,

  dots: true,

  arrows: false,

  dotsClass: 'slick-dots slick-dots-black',

  adaptiveHeight: true,

};

// my slick slider as constant object

const mySlider = $('.slider').on('init', function(slick) {

  // on init run our multi slide adaptive height function

  multiSlideAdaptiveHeight(this);

}).on('beforeChange', function(slick, currentSlide, nextSlide) {

  // on beforeChange run our multi slide adaptive height function

  multiSlideAdaptiveHeight(this);

}).slick(options);

// our multi slide adaptive height function passing slider object

function multiSlideAdaptiveHeight(slider) {

  // set our vars

  let activeSlides = [];

  let tallestSlide = 0;

  // very short delay in order for us get the correct active slides

  setTimeout(function() {

    // loop through each active slide for our current slider

    $('.slick-track .slick-active', slider).each(function(item) {

      // add current active slide height to our active slides array

      activeSlides[item] = $(this).outerHeight();

    });

    // for each of the active slides heights

    activeSlides.forEach(function(item) {

      // if current active slide height is greater than tallest slide height

      if (item > tallestSlide) {

        // override tallest slide height to current active slide height

        tallestSlide = item;

      }

    });

    // set the current slider slick list height to current active tallest slide height

    $('.slick-list', slider).height(tallestSlide);

  }, 10);

}

// when window is resized

$(window).on('resize', function() {

  // run our multi slide adaptive height function incase current slider active slides change height responsively

  multiSlideAdaptiveHeight(mySlider);

});

body {

  background: skyblue;

  margin: 0;

  padding: 20px;

}

.slick-list {

  transition: all .5s ease;

}

.aslide {

  background: yellow;

}

<div class="slider">

  <div class="aslide">1</div>

  <div class="aslide">2<br/>2<br/>2</div>

  <div class="aslide">3<br/>3<br/>3<br/>3<br/>3</div>

  <div class="aslide">4<br/>4<br/>4</div>

  <div class="aslide">5</div>

  <div class="aslide">6<br/>6<br/>6</div>

  <div class="aslide">7<br/>7<br/>7<br/>7<br/>7</div>

  <div class="aslide">8<br/>8</div>

  <div class="aslide">9<br/>9<br/>9<br/>9<br/>9<br/>9</div>

  <div class="aslide">10<br/>10<br/>10</div>

  <div class="aslide">11</div>

  <div class="aslide">12<br/>12</div>

</div>

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

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

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