Tengo problemas con el complemento Slick carousel JS con múltiples slidesToShow que tienen diferentes alturas.
Necesito que las diapositivas tengan la misma altura , pero con CSS flex-box no funciona porque las diapositivas tienen definiciones de CSS en conflicto.
Además, no encontré nada útil en los foros y en la web.
HTML
<div class="slider"> <div class="slide"> <p>Lorem ipsum.</p> </div> <div class="slide"> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua</p> </div> <div class="slide"> <p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p> </div> <div class="slide"> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p> </div> </div>JS
$('.slider') .slick({ autoplay: false, dots: false, infinite: false, arrows: false, slidesToShow: 2, slidesToScroll: 2, rows: 0 });CSS
.slide { height: 100%; background-color: #ccc; padding: 10px; }Agregue un par de estilos CSS y estará listo:
.slick-track { display: flex !important; } .slick-slide { height: inherit !important; }¡Disfrutar! :-)
Ok chicos, encontré una solución fácil. Simplemente agregue una función de devolución de llamada setPosition (se activa después de cambios de posición/tamaño) que establece la altura de las diapositivas a la altura del control deslizante (slideTrack):
JS
$('.slider').slick({ autoplay: false, dots: false, infinite: false, arrows: false, slidesToShow: 2, slidesToScroll: 2, rows: 0 }) .on('setPosition', function (event, slick) { slick.$slides.css('height', slick.$slideTrack.height() + 'px'); });No olvide que sus diapositivas deben tener la altura completa:
CSS
.slide { height: 100%; }Aquí hay un pequeño jsFiddle para demostrar: https://jsfiddle.net/JJaun/o29a4q45/
La solución js de @JJaun no es perfecta, porque ves que la altura salta si usas una imagen de fondo para las diapositivas. Esto funcionó para mí:
.slick-track { display: flex !important; } .slick-slide { height: auto; }