Estoy usando swiper js para mostrar un control deslizante en mi página de inicio. Actualmente está configurado con el efecto de diapositiva predeterminado y me gustaría sobrescribir este comportamiento: https://swiperjs.com/demos

Lo que me gustaría lograr es que desaparezca la imagen activa en la transición a la siguiente imagen y luego deslice (efecto predeterminado) la siguiente imagen. Entonces, desvanezca la imagen activa actual, deslice la siguiente. Traté de jugar con CSS3, los parámetros del efecto de desvanecimiento y las devoluciones de llamada, pero no pude lograr lo que quería.

Mi marcado se ve así:

 <div class="swiper-container" data-swiper='{"autoplay": {"delay": 2000, "disableOnInteraction": false}, "navigation": {"nextEl": ".next", "prevEl": ".prev"}}'> <div class="swiper-wrapper"> <div class="swiper-slide"> <img class="image" src="/test1.png"/> </div> <div class="swiper-slide"> <img class="image" src="/test2.png"/> </div> <div class="swiper-slide"> <img class="image" src="/test3.png"/> </div> </div> </div>

Y aquí está mi js:

 let elements = document.querySelectorAll('.swiper-container'); import(/* webpackChunkName: "swiper" */ "swiper/swiper.min.css"); import(/* webpackChunkName: "swiper" */ "swiper").then( ({default: Swiper, Autoplay, Navigation, EffectFade}) => { Swiper.use([Autoplay, Navigation, EffectFade]); elements.forEach((element) => { const settings = JSON.parse(element.dataset.swiper || '{}'); let swiper = new Swiper(element, settings); swiper.on('slideChangeTransitionStart', () => { $('.swiper-slide').each(function () { if ($(this).index() === swiper.activeIndex) { // Fadein in active slide // slide in normally } else { // fade out inactive class but don't slide $(this).find('.image').fadeOut(300); } }); }) }); });

Logré usar una devolución de llamada "slideChangeTransitionStart". ¿Alguien sabe cuál sería la forma más fácil de habilitar/deshabilitar el comportamiento de deslizamiento predeterminado? ¿Debo sobrescribir el CSS o hay una forma más limpia?