¿Cómo animar cada capa de contenido con la animación css seleccionada con la diapositiva owlCarousel?
Aquí lo que hice, pero no puedo hacer que funcione correctamente.
HTML
<div class="owl-carousel owl-theme"> <div class="slide-item-1"> <div class="layer layer1"> <div data-animate="animated fadeInLeft"> <h1>I'm layer 1</h1> </div> </div> <div class="layer layer2"> <div data-animate="animated fadeInLeft"> <h2>I'm layer 2</h2> </div> </div> </div> <div class="slide-item-2"> <div class="layer layer1"> <div data-animate="animated fadeInLeft"> <h1>I'm layer 1</h1> </div> </div> <div class="layer layer2"> <div data-animate="animated fadeInLeft"> <h2>I'm layer 2</h2> </div> </div> <div class="layer layer3"> <div data-animate="animated fadeInLeft"> <h2>I'm layer 3</h2> </div> </div> </div> </div>JavaScript
jQuery(document).ready(function($) { $('.owl-carousel').owlCarousel({ items:1, dots: true, nav: false, animateOut: 'fadeOutLeft', animateIn: 'fadeInRight', autoplay:true, onTranslated: animateSlide, onTranslate: removeAnimation }); function removeAnimation() { var item = $(".owl-item .layer"); item.removeClass(item.children().data('animate')); } function animateSlide() { var item = $(".owl-item.active .layer"); item.addClass(item.children().data('animate')); } });Ahora tengo estos problemas,
Primero muestra el contenido y luego anima, quiero decir que el contenido no viene animado, viene primero y luego animado.
El contenido DIV de la 'capa' de la primera diapositiva no anima el contenido en la primera vista, pero es bueno después de regresar de otras diapositivas.
La animación de contenido DIV de la 'capa' de la última diapositiva funciona en la vista por primera vez, pero la próxima vez no funciona. Lo que puedo ver es que agrega animación doble o no elimina la clase de animación después de deslizar a otra.
Las diapositivas intermedias funcionan bien sin ningún problema.
Hay diferentes eventos del carrusel de búhos a los que puede vincular animaciones animate.css .
En el ejemplo utilicé el evento change.owl.carousel :
cambiar.buho.carrusel
Tipo:
attachable
Devolución de llamada:onChange
Parámetro:property
Cuando una propiedad va a cambiar su valor.
La función en sí agrega la clase de animación ( addClass() ) y la elimina nuevamente después de que se activa el final de la animación ( one(...) seguido de removeClass() ).
var owl = $('.custom1').owlCarousel({ animateOut: 'slideOutDown', animateIn: 'flipInX', items:1, margin:30, stagePadding:30, smartSpeed:450, loop: true, dots: true, autoplay: true, }); owl.on('change.owl.carousel', function (event) { var el = event.target; $('h4', el).addClass('slideInRight animated') .one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function () { $('h4', el).removeClass('slideInRight animated'); }); }); <link href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet"/> <link href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.theme.default.min.css" rel="stylesheet"/> <link href="https://owlcarousel2.github.io/OwlCarousel2/assets/css/docs.theme.min.css" rel="stylesheet"/> <link href="https://owlcarousel2.github.io/OwlCarousel2/assets/css/animate.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/owl.carousel.js"></script> <section id="demos"> <div class="custom1 owl-carousel owl-theme"> <div class="item"><h4>1</h4> </div><div class="item"><h4>2</h4> </div><div class="item"><h4>3</h4> </div><div class="item"><h4>4</h4> </div><div class="item"><h4>5</h4> </div><div class="item"><h4>6</h4> </div> </div> </section>