显示 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.&nbsp;在这个元素上使用 css transition 会产生光滑的adaptiveHeight效果。我们还有一个.on('resize')事件会重新运行滑块高度检查，以防幻灯片内容流动并且幻灯片高度响应变化。阅读我在脚本中的评论，看看发生了什么......另请参阅此处的小提琴...&nbsp;https://jsfiddle.net/joshmoto/1a5vwr3j/// my slick slider optionsvar options = {&nbsp; slidesToShow: 2,&nbsp; slidesToScroll: 2,&nbsp; dots: true,&nbsp; arrows: false,&nbsp; dotsClass: 'slick-dots slick-dots-black',&nbsp; adaptiveHeight: true,};// my slick slider as constant objectconst mySlider = $('.slider').on('init', function(slick) {&nbsp; // on init run our multi slide adaptive height function&nbsp; multiSlideAdaptiveHeight(this);}).on('beforeChange', function(slick, currentSlide, nextSlide) {&nbsp; // on beforeChange run our multi slide adaptive height function&nbsp; multiSlideAdaptiveHeight(this);}).slick(options);// our multi slide adaptive height function passing slider objectfunction multiSlideAdaptiveHeight(slider) {&nbsp; // set our vars&nbsp; let activeSlides = [];&nbsp; let tallestSlide = 0;&nbsp; // very short delay in order for us get the correct active slides&nbsp; setTimeout(function() {&nbsp; &nbsp; // loop through each active slide for our current slider&nbsp; &nbsp; $('.slick-track .slick-active', slider).each(function(item) {&nbsp; &nbsp; &nbsp; // add current active slide height to our active slides array&nbsp; &nbsp; &nbsp; activeSlides[item] = $(this).outerHeight();&nbsp; &nbsp; });&nbsp; &nbsp; // for each of the active slides heights&nbsp; &nbsp; activeSlides.forEach(function(item) {&nbsp; &nbsp; &nbsp; // if current active slide height is greater than tallest slide height&nbsp; &nbsp; &nbsp; if (item > tallestSlide) {&nbsp; &nbsp; &nbsp; &nbsp; // override tallest slide height to current active slide height&nbsp; &nbsp; &nbsp; &nbsp; tallestSlide = item;&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; });&nbsp; &nbsp; // set the current slider slick list height to current active tallest slide height&nbsp; &nbsp; $('.slick-list', slider).height(tallestSlide);&nbsp; }, 10);}// when window is resized$(window).on('resize', function() {&nbsp; // run our multi slide adaptive height function incase current slider active slides change height responsively&nbsp; multiSlideAdaptiveHeight(mySlider);});body {&nbsp; background: skyblue;&nbsp; margin: 0;&nbsp; padding: 20px;}.slick-list {&nbsp; transition: all .5s ease;}.aslide {&nbsp; background: yellow;}<div class="slider">&nbsp; <div class="aslide">1</div>&nbsp; <div class="aslide">2<br/>2<br/>2</div>&nbsp; <div class="aslide">3<br/>3<br/>3<br/>3<br/>3</div>&nbsp; <div class="aslide">4<br/>4<br/>4</div>&nbsp; <div class="aslide">5</div>&nbsp; <div class="aslide">6<br/>6<br/>6</div>&nbsp; <div class="aslide">7<br/>7<br/>7<br/>7<br/>7</div>&nbsp; <div class="aslide">8<br/>8</div>&nbsp; <div class="aslide">9<br/>9<br/>9<br/>9<br/>9<br/>9</div>&nbsp; <div class="aslide">10<br/>10<br/>10</div>&nbsp; <div class="aslide">11</div>&nbsp; <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>