Estoy tratando de construir este diseño:

Hasta ahora, esto es lo que logré: https://jsfiddle.net/lilalilabp/t24frjkL/1/

 <script> $(function () { var galleryThumbs = new Swiper(".gallery-thumbs", { // centeredSlides: true, centeredSlidesBounds: true, direction: "horizontal", slidesPerView: 3, spaceBetween: 20, freeMode: false, watchSlidesVisibility: true, watchSlidesProgress: true, watchOverflow: true, mousewheel: true, loop:true, breakpoints: { 480: { direction: "vertical", slidesPerView: 3 } } }); var galleryTop = new Swiper(".gallery-top", { loop:true, direction: "horizontal", spaceBetween: 20, navigation: { nextEl: ".swiper-next-2", prevEl: ".swiper-prev-2" }, thumbs: { swiper: galleryThumbs } }); galleryTop.on("slideChangeTransitionStart", function () { galleryThumbs.slideTo(galleryTop.activeIndex); }); galleryThumbs.on("transitionStart", function () { galleryTop.slideTo(galleryThumbs.activeIndex); }); }); </script>

Como puede ver, no responde y no he podido encontrar una manera de mostrar una parte de la cuarta imagen en la galería de miniaturas (como se muestra en el diseño). Intenté elegir "automático" como diapositivas por vista, pero la galería de miniaturas solo parece funcionar con alturas y anchos fijos y diapositivas fijas por vista.

Además, me gustaría que las miniaturas se movieran junto con el control deslizante principal. Hasta ahora, solo se mueve después de que se mueven tres diapositivas principales (por favor, mira el violín para ver a qué me refiero con eso).

¿Alguna sugerencia? Gracias por adelantado.

¿Alguien podría ayudarme con esto? Gracias por adelantado.