是的，看起來 slick 只允許adaptiveHeight在單個(gè)滑動(dòng)輪播上使用。
在它的文檔adaptiveHeight中說這個(gè)......
啟用單幻燈片水平輪播的自適應(yīng)高度。
有趣的是，我從沒想過 slick 會(huì)有這種行為，我假設(shè)自適應(yīng)高度在所有情況下都有效。但顯然不是。
這有點(diǎn) hacky，但可能涵蓋您網(wǎng)站的解決方案，以在多幻燈片滑塊上啟用自適應(yīng)高度。這基本上找到了當(dāng)前顯示的最高幻燈片，并為.slick-list. 在這個(gè)元素上使用 css transition 會(huì)產(chǎn)生光滑的adaptiveHeight效果。
我們還有一個(gè).on('resize')事件會(huì)重新運(yùn)行滑塊高度檢查，以防幻燈片內(nèi)容流動(dòng)并且幻燈片高度響應(yīng)變化。
閱讀我在腳本中的評(píng)論，看看發(fā)生了什么......
另請(qǐng)參閱此處的小提琴... 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>
