Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

594
Views
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.

about 4 years ago · Santiago Trujillo
1 answers
Answer question

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>

about 4 years ago · Santiago Trujillo Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!