CODEWITHSUNDEEP
javascripthtmlowl-carousel
Boombaar
Boombaar

Reputation: 171

Animate CSS on owl.carousel.change

I use this owl-carousel and add animate.css for some text in this slider. Now animation work good on start, and that's it. I need some solution, how to do in js to .addClass and .removeClass on owl.carousel.change. I tried something, but didn't work.

 <div id="BG" class="owl-carousel owl-theme">
     <div class="bg-item1">
        <div class="container row h-100">
            <div class="col-sm-12 align-self-center">
                <div class="bg-txt animated fadeInRight delay-2s">
                    <span style="text-transform: uppercase; font-weight:bold;"> SOME TEXT </span>                                          
                </div>
             </div>
        </div>
     </div>
     <div class="bg-item2">
         <div class="container row h-100">
             <div class="col-sm-12 align-self-center">
                  <div class="bg-txt animated fadeInRight delay-2s ">
                     <span style="text-transform: uppercase; font-weight: bold;"> SOME TEXT </span       
                   </div>
              </div>
          </div>
      </div>
</div>

Upvotes: 1

Views: 3362

Answers (1)

etarhan
etarhan

Reputation: 4176

The library Owl Carousel 2 supports animated slide transitions. You can pass the animated classes you would like to add to the animateIn and animateOut properties. See the snippet below for a working example using animateIn:

$(document).ready(function() {
  var owl = $('.owl-carousel');

  owl.owlCarousel({
    animateIn: 'fadeInRight delay-2s',
    items: 1,
    loop: true,
    nav: true,
  });
});
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.css" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.js"></script>
<div id="BG" class="owl-carousel owl-theme">
  <div class="bg-item1">
    <div class="container row h-100">
      <div class="col-sm-12 align-self-center">
        <div class="bg-txt animated fadeInRight delay-2s">
          <span style="text-transform: uppercase; font-weight:bold;"> SOME TEXT </span>
        </div>
      </div>
    </div>
  </div>
  <div class="bg-item2">
    <div class="container row h-100">
      <div class="col-sm-12 align-self-center">
        <div class="bg-txt animated fadeInRight delay-2s">
          <span style="text-transform: uppercase; font-weight: bold;"> SOME TEXT </span> </div>
      </div>
    </div>
  </div>
</div>

If you need to animate individual items in your slide upon changing of the slides you could utilize the translate.owl.carousel event (NOT change.owl.carousel since it appears to not work properly for this purpose). See the following snippet for an example of that:

$(document).ready(function() {
  var owl = $('.owl-carousel');
  owl.owlCarousel({
    items: 1,
    loop: true,
    nav: true,
  });

  $('.owl-carousel').on('translate.owl.carousel', function(e) {
    var index = e.item.index;
    $('.bg-txt').removeClass('animated fadeInRight delay-2s');
    $('.bg-txt').eq(index).addClass('animated fadeInRight delay-2s');
  });
});
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.css" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.js"></script>
<div id="BG" class="owl-carousel owl-theme">
  <div class="bg-item1">
    <div class="container row h-100">
      <div class="col-sm-12 align-self-center">
        <div class="bg-txt animated fadeInRight delay-2s">
          <span style="text-transform: uppercase; font-weight:bold;"> SOME TEXT </span>
        </div>
      </div>
    </div>
  </div>
  <div class="bg-item2">
    <div class="container row h-100">
      <div class="col-sm-12 align-self-center">
        <div class="bg-txt">
          <span style="text-transform: uppercase; font-weight: bold;"> SOME TEXT </span> </div>
      </div>
    </div>
  </div>
</div>

Upvotes: 1

Related Questions