Uso de Slick Carousel con una imagen de fondo en una cuadrícula de isótopos (mampostería): la altura de las diapositivas se convierte en 1px

Estoy usando isótopo para generar una cuadrícula dinámica de bloques. Algunos bloques pueden tener un carrusel dentro de ellos. Estoy usando el carrusel Slick ( http://kenwheeler.github.io/slick/ ) para hacer esto.

Aquí un ejemplo> 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); }); 

Después de inicializar el isótopo, inicio el carrusel, luego cambia la altura de la diapositiva a 1px.

¿Como puedo resolver esto?

El problema es que sus diapositivas están configuradas en height: 100% , pero cuando slick.js se inicializa, inserta nuevos elementos DOM y rompe su jerarquía, de modo que el elemento principal de cada diapositiva no tiene altura.

Con un poco de javascript adicional, puede forzar a los padres de las diapositivas individuales (que se insertan con slick.js) para que coincidan con la altura del contenedor de isótopos.

Los elementos DOM insertados como elementos principales en las diapositivas son: div.slick-list y div.slick-track

Use javascript para establecer la altura de .slick-list para que coincida con la altura del contenedor, y use css para establecer .slick-track en 100%. Luego la altura de la diapositiva individual se propagará correctamente una vez más.

Vea aquí un ejemplo práctico : http://jsfiddle.net/9dja3omp/5/

Además, slick.js debe iniciarse después del isótopo. Aquí hay otro ejemplo sin el retraso de 3 segundos: http://jsfiddle.net/9dja3omp/6/