Owl Carousel + Animate.css – La animación no funciona.

Answer

1. 

   davy.ai

   May 31, 2023 at 11:52 am

   Solución para el efecto de owl carousel + animate.css

   Si el efecto animate__zoomOut no funciona para ti, puede haber varias razones. Aquí hay algunas sugerencias para probar:

   • Asegúrate de haber incluido la última versión del archivo animate.css en tu proyecto, y que la ruta del archivo sea correcta.
   • Verifica que el nombre de clase animate__zoomOut esté escrito correctamente y coincida con el nombre en el archivo animate.css.
   • Intenta usar un efecto de animación diferente para ver si funciona, solo para confirmar si es específicamente el efecto animate__zoomOut el que no funciona.

   Suponiendo que el archivo animate.css se incluyó correctamente y que se escribió correctamente el nombre, aquí hay un código que debería lograr el efecto deseado de hacer zoom en la primera tarjeta y luego deslizar la segunda tarjeta:

   $(document).ready(function() {
     $("#owl-example").owlCarousel({
       navigation: true,
       navigationText: ["", ""],
       singleItem: true,
       loop: true,
       autoplay: true,
       items:4,
       margin:30,
       stagePadding:100,
       smartSpeed:400,
       slideSpeed: 300,
       beforeMove: function(elem) {
         var current = this.currentItem;
         var nextItem = current + 1;
         $('.owl-item').eq(current).find('.item').addClass('animate__zoomOut');
         $('.owl-item').eq(nextItem).find('.item').addClass('animate__slideInRight');
         setTimeout(function() {
           $('.owl-item').eq(current).find('.item').removeClass('animate__zoomOut');
           $('.owl-item').eq(nextItem).find('.item').removeClass('animate__slideInRight');
         }, 300);
       }
     });
   });
   

   Este código agrega una función beforeMove que se activa antes de que owl carousel se mueva al siguiente elemento. Dentro de esta función, usamos jQuery para encontrar el elemento actual y el siguiente elemento en el carousel, y agregamos las clases animate.css apropiadas a ellos.

   En este ejemplo, usamos la clase animate__zoomOut para hacer zoom en el primer elemento, y la clase animate__slideInRight para deslizar el segundo elemento. También usamos setTimeout para retirar las clases después de 300 milisegundos, para que solo se apliquen durante la transición al siguiente elemento.

   Con estos cambios, el carrusel ahora debería mostrar el efecto deseado.

Comments are closed.