title: Using the Slick Carousel with a background image in a Isotope (masonry) grid - height of slides becomes 1px
body: <p>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 (<a href="http://kenwheeler.github.io/slick/" rel="nofollow">http://kenwheeler.github.io/slick/</a>) to do this.</p>
  
  <p>Here an example > <a href="http://jsfiddle.net/9dja3omp/1/" rel="nofollow">http://jsfiddle.net/9dja3omp/1/</a></p>
  
  <pre><code>$(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);    
  
  });
  </code></pre>
  
  <p>After I initialise isotope I init the carousel, then it changes the height of the slide to 1px. </p>
  
  <p>How can I solve this?</p>