Me pregunto si es posible crear algo como esto usando un control deslizante.
+-------+ +-------+ | | | | | +-------+ | +----| |----+ | | +-------+El problema viene con el ajuste del margen entre las diapositivas. Encontré Cómo agregar espacios entre el elemento del carrusel Slick que explica que puede modificar el margen de esta manera:
/* the slides */ .slick-slide { margin: 0 27px; } /* the parent */ .slick-list { margin: 0 -27px; }Sin embargo, no puedo cambiar el margen a un valor negativo, de modo que el tercer elemento estaría encima de dos en lugar de solo entre ellos.
¿Alguien hizo esto o conoce algún enlace de referencia que tuviera algo similar?
Entonces, si alguien todavía está interesado, pude obtener lo que quería de esta manera:
#wrapper { width: 100%; display: table; table-layout: fixed; border-collapse: collapse; padding: 10px; /* important !! */ } .slick-slide { /* spacing in between each slide */ margin: 0 -10px; } .slick-list { /* spacing in between the group of slides */ padding: 0 20px; } .slick-track { /* spacing for the slider itself */ min-height: 600px; } .slide { position: relative; float: left; } .slide:nth-child(3n+2) { top: 10em; z-index: 1; }Con estos estilos pude conseguir lo que buscaba. Sin embargo, todavía se mostraba cada primera diapositiva de la lista de hermanos . Entonces, para eso, opté por un script, que básicamente oculta las diapositivas inactivas y solo muestra las visibles.
$(document).ready(function(){ /* runs only once */ $(".slide").css({opacity: 0}); $(".slick-active").css({opacity: 1}); /* runs after slides are being changed */ $('#wrapper').on('afterChange', function(event, slick, currentSlide, nextSlide){ $(".slide").animate({opacity: 0}, 100); $(".slick-active").animate({opacity: 1}, 300); }); })