Using the Slick Carousel with a background image i

问题:

I'm using isotope to generate a dynamic grid of blocks. Some blocks can have a carousel inside of them. I'm using the Slick Carousel (http://kenwheeler.github.io/slick/) to do this.

Here an example > 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);    

});

After I initialise isotope I init the carousel, then it changes the height of the slide to 1px.

How can I solve this?

回答1:

The problem is that your slides are set to height: 100%, but when slick.js is initialized, it inserts new DOM elements and breaks your heirarchy, so that the parent of each slide has no height.

With a little extra javascript, you can force the parents of the individual slides (which is inserted by slick.js) to match the height of the isotope container.

The DOM elements inserted as parents to the slides are: div.slick-list and div.slick-track

Use javascript to set the height of .slick-list to match the height of the container, and use css to set .slick-track to 100%. Then the height of the individual slide will propogate correctly once again.

See here for a working example: http://jsfiddle.net/9dja3omp/5/

Also, slick.js must be init'd after isotope. Here's another example without the 3 second delay: http://jsfiddle.net/9dja3omp/6/