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

Question

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?

Solution

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/

Comments

[colin]

I'll try this out tomorrow. Thanks dude. Your example in the JSfiddle works like a charm!

[colin]

@peter I still have some a minor problem. It's working but I keep getting a JS error in my console. Uncaught TypeError: Cannot read property 'css' of null. This line > this.$list.css('height',this.$slider.parents('.b__carousel')‌​.outerHeight(true));

[eterps]

Do you have that inside your slick(...) onInit function? Not sure why $list is null. Perhaps the carousel is not getting initialized properly in some cases.

[eterps]

Anyway, put an 'if' statement around it to check for the existence of $list, such as: if( this.$list ) { this.$list.css('height',...) }