在同位素（砖石）网格中使用带有背景图像的Slick Carousel – 幻灯片的高度变为1px

我正在使用同位素来生成块的动态网格。 有些街区内可以有旋转木马。 我正在使用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。

我怎么解决这个问题？

Answer 1

问题是你的幻灯片被设置为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/