2

ブロックの動的グリッドを生成するためにアイソトープを使用しています。一部のブロックは、内部にカルーセルを持つことができます。これを行うために、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 に変更されます。

どうすればこれを解決できますか?

4

1 に答える 1

3

問題は、スライドが に設定されていることです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/

于 2015-01-24T19:08:27.460 に答える