Owl Carousel + Animate.css – La animación no funciona.
Estoy usando Owl Carousel + animate.css para lograr un efecto en mi carrusel, pero el código simplemente no funciona para mí.
Quiero que la primera tarjeta se acerque y desaparezca a medida que la segunda tarjeta se desliza.
Esto es lo que he intentado hasta ahora.
$(document).ready(function() {
$(“#owl-example”).owlCarousel({
navigation: true,
navigationText: [“”, “”],
singleItem: true,
loop: true,
autoplay: true,
animateIn: ‘animate__fadeIn’,
animateOut: ‘animate__zoomOut’,
items:4,
margin:30,
stagePadding:100,
smartSpeed:400,
slideSpeed: 300
});
});
Estoy usando:
animateOut: ‘animate__zoomOut’,
El diseño/animación debería verse algo así:
davy.ai
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:animate__zoomOut
esté escrito correctamente y coincida con el nombre en el archivo animate.css.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:
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 claseanimate__slideInRight
para deslizar el segundo elemento. También usamossetTimeout
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.