Swiper JS No deslizar durante el inicio de la transición

Answer

1. 

   davy.ai

   August 6, 2023 at 7:56 am

   Para cambiar el efecto de diapositiva predeterminado a un efecto de fundido para diapositivas inactivas en swiper.js, puedes usar una función de callback y modificar el CSS de las diapositivas inactivas. Puedes lograr esto siguiendo los siguientes pasos:

   1. Agrega una propiedad transition al CSS de la clase .swiper-slide para habilitar el efecto de fundido. Por ejemplo:

   .swiper-slide {
      opacity: 1;
      transition: opacity .4s ease-in-out;
   }
   

   1. En el código de inicialización de swiper.js, agrega una propiedad fadeEffect y configúrala como un objeto con la propiedad crossFade establecida en true. Esto habilitará el efecto de fundido entre las diapositivas. Por ejemplo:

   let swiper = new Swiper(element, {
      effect: 'fade',
      fadeEffect: {
         crossFade: true
      },
      // otros ajustes
   });
   

   1. Agrega un event listener slideChangeTransitionStart a la instancia de swiper para manejar la transición de diapositivas. En esta función del event listener, puedes iterar sobre todos los elementos .swiper-slide y verificar su índice con la propiedad activeIndex de la instancia de swiper. Si el índice coincide, puedes establecer la propiedad opacity en 1 para mostrar la diapositiva activa. De lo contrario, puedes establecer la propiedad opacity en 0 para desvanecer la diapositiva inactiva. Por ejemplo:

   swiper.on('slideChangeTransitionStart', () => {
      $('.swiper-slide').each(function () {
         if ($(this).index() === swiper.activeIndex) {
            // Mostrar diapositiva activa, habilitar comportamiento de desplazamiento
            $(this).css('opacity', 1);
         } else {
            // Desvanecer diapositiva inactiva, habilitar efecto de fundido
            $(this).css('opacity', 0);
         }
      });
   });
   

   Con estos cambios, las diapositivas inactivas se desvanecerán mientras la diapositiva activa se desplaza.

Comments are closed.