我正在使用同位素生成块的动态网格。一些街区中可以有一个旋转木马。我正在使用Slick Carousel（http://kenwheeler.github.io/slick/）执行此操作。
这是一个示例> http://jsfiddle.net/9dja3omp/1/
$(function () {
var $container = $('.grid').imagesLoaded( function() {
$container.isotope({
itemSelector: '.block',
gutter: 0,
transitionDuration: 0
});
});
setTimeout(function(){
var carousel = $(".carousel__container");
carousel.slick({
speed: 700,
arrows: false,
adaptiveHeight: true
});
console.log("load carousel");
}, 3000);
});
初始化同位素后，我启动轮播，然后将幻灯片的高度更改为1px。
我该如何解决？
问题是您的幻灯片设置为height: 100%，但是在初始化slick.js时，它将插入新的DOM元素并中断您的继承结构，因此每张幻灯片的父级都没有高度。
使用一些额外的JavaScript，您可以强制单个幻灯片的父级（由slick.js插入）以匹配同位素容器的高度。
作为幻灯片的父级插入的DOM元素是：div.slick-list和div.slick-track
使用javascript设置.slick-list的高度以匹配容器的高度，然后使用css将.slick-track设置为100％。然后，单个幻灯片的高度将再次正确传播。
参见此处的工作示例：http : //jsfiddle.net/9dja3omp/5/
另外，必须在同位素之后初始化slick.js。这是另一个没有3秒延迟的示例：http : //jsfiddle.net/9dja3omp/6/
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句