Estoy buscando una solución para mi control deslizante de imágenes con altura variable de las imágenes. La herramienta que estoy usando es Swiper con el efecto creativo. El control deslizante de imágenes debe mostrar 5 imágenes en pantallas grandes y 3 en pantallas pequeñas, la imagen central debe ser la más grande.

Una función del control deslizante debería ser cambiar el tamaño de las imágenes de acuerdo con el evento táctil; esto funciona con la excepción del espacio entre la primera y la última diapositiva, en este espacio no se detectan eventos táctiles (consulte Descripción general del problema en las diferentes pantallas). tamaños ).

Aunque no me es posible mostrar 5 imágenes en pantallas grandes usando los puntos de interrupción, solo sin usar el 'efecto creativo'. He probado para cambiar mediante programación el tamaño de cada imagen mientras se desliza, pero no funciona muy bien...

Espero que me puedan ayudar, tengo problemas con el control deslizante desde hace días...

 let imgs = document.getElementsByClassName('swiper-slide'); var swiper = new Swiper(".mySwiper", { breakpoints: { // when window width is >= 320px 320: { slidesPerView: 3, spaceBetween: 10 }, // when window width is >= 576px 576: { slidesPerView: 3, spaceBetween: 20 }, // when window width is >= 768px 768: { slidesPerView: 5, spaceBetween: 20 }, 992: { slidesPerView: 5, spaceBetween: 30 }, }, effect: 'creative', creativeEffect: { //progressMultiplier: 0.9, shadowPerProgress: true, prev: { // will set `translateX(-122%)` on previous slides scale: 0.7, translate: ['-122%', 0, 0], }, next: { // Slide scale scale: 0.7, // will set `translateX(122%)` on next slides translate: ['122%', 0, 0], }, }, loop: true, centeredSlides: true, }); swiper.on('slideChange', function () { //console.log('slide changed'); console.log(swiper.realIndex); //var img1 = document.getElementById('img1'); var actIn = swiper.realIndex; const index_currentSlide = swiper.realIndex; const currentSlide = swiper.slides[index_currentSlide] //currentSlide.style.height = "10%"; -> maybe possible with height changes?! swiper.update(); swiper.updateSlides(); });