Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

597
Vistas
How to add animation on owlCarousel slider contents

How to animate each content layer with selected css animation with owlCarousel slide?

Here what I did, but I can't make it work properly.

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'));
    }
});

Now I have this issues,

  1. It shows content first and then animate, I mean contents don't come with animated, it comes first then animate.

  2. First slide 'layer' DIV content don't animate content in first view but good after come back from other slides..

  3. Last slide 'layer' DIV content animation works on first time view but next time don't work. What I can see is it add double animation or don't remove animation class after slide to another.

  4. Middle slides are working fine without any problem.

over 4 years ago · Santiago Trujillo
1 Respuestas
Responde la pregunta

0

There are different events of the owl-carousel where you can bind animate.css animations to.

In the example I used the change.owl.carousel event:

change.owl.carousel

Type: attachable
Callback: onChange
Parameter: property
When a property is going to change its value.

The function itself adds the animation class (addClass()) and removes it again after the animation end is triggered (one(...) followed by 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>

over 4 years ago · Santiago Trujillo Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda