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

Question

我正在使用同位素生成动态方块网格。一些块可以在它们内部有一个旋转木马。我正在使用 Slick Carousel (http://kenwheeler.github.io/slick/) 来执行此操作。

$(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 必须在 isotope 之后初始化。这是另一个没有 3 秒延迟的示例：http://jsfiddle.net/9dja3omp/6/

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

Using the Slick Carousel with a background image in a Isotope (masonry) grid - height of slides becomes 1px

jquery

carousel

jquery-isotope

slick.js