Owl carousel and Animate.css

index.html

<div class="owl-carousel owl-theme">
      <div class="item">
        <h4 data-animation-in="fadeInUp" data-animation-out="animate-out fadeOutDown">Slide 1</h4>
        <p data-animation-in="rollIn" data-animation-out="animate-out rollOut">Cras a elementum dolor. Praesent aliquam sapien ac eros semper ullamcorper. Sed imperdiet enim at sodales suscipit. Aenean eget faucibus ipsum.</p>
        <p><a href="#" class="btn" data-animation-in="fadeInLeft" data-animation-out="animate-out fadeOutRight">Button 1</a></p>
      </div>
      <div class="item">
        <h4 data-animation-in="flipInY" data-animation-out="animate-out fadeOutUp">Slide 2</h4>
        <p data-animation-in="flipInX" data-animation-out="animate-out fadeOutLeft">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc id dolor pulvinar, mollis orci vitae, molestie elit. Maecenas scelerisque ipsum nibh, id imperdiet nulla lobortis nec.</p>
        <p><a href="#" class="btn" data-animation-in="bounceInLeft" data-animation-out="animate-out bounceOutRight">Button 2</a></p>
      </div>
      <div class="item">
        <h4 data-animation-in="slideInDown" data-animation-out="animate-out slideOutUp">Slide 3</h4>
        <p data-animation-in="slideInRight" data-animation-out="animate-out fadeOut">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc id dolor pulvinar, mollis orci vitae, molestie elit. Maecenas scelerisque ipsum nibh, id imperdiet nulla lobortis nec.</p>
        <p><a href="#" class="btn" data-animation-in="slideInUp" data-animation-out="animate-out slideOutDown">Button 3</a></p>
      </div>
  </div>

owl-carousel-and-animate-css.markdown

Owl carousel and Animate.css

A Pen by Art Klass on CodePen.

License.

script.js

$(document).ready(function (){
  // Declare Carousel jquery object
  var owl = $('.owl-carousel');

  // Carousel initialization
  owl.owlCarousel({
    animateOut: 'slideOutDown',
    animateIn: 'flipInX',
      loop:false,
      margin:0,
      navSpeed:500,
      nav:true,
      autoplay: true,
      rewind: true,
      items:1
  });


  // add animate.css class(es) to the elements to be animated
  function setAnimation ( _elem, _InOut ) {
    // Store all animationend event name in a string.
    // cf animate.css documentation
    var animationEndEvent = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';

    _elem.each ( function () {
      var $elem = $(this);
      var $animationType = 'animated ' + $elem.data( 'animation-' + _InOut );

      $elem.addClass($animationType).one(animationEndEvent, function () {
        $elem.removeClass($animationType); // remove animate.css Class at the end of the animations
      });
    });
  }

// Fired before current slide change
  owl.on('change.owl.carousel', function(event) {
      var $currentItem = $('.owl-item', owl).eq(event.item.index);
      var $elemsToanim = $currentItem.find("[data-animation-out]");
      setAnimation ($elemsToanim, 'out');
  });

// Fired after current slide has been changed
  var round = 0;
  owl.on('changed.owl.carousel', function(event) {

      var $currentItem = $('.owl-item', owl).eq(event.item.index);
      var $elemsToanim = $currentItem.find("[data-animation-in]");
    
      setAnimation ($elemsToanim, 'in');
  })
  
  owl.on('translated.owl.carousel', function(event) {
    console.log (event.item.index, event.page.count);
    
      if (event.item.index == (event.page.count - 1))  {
        if (round < 1) {
          round++
          console.log (round);
        } else {
          owl.trigger('stop.owl.autoplay');
          var owlData = owl.data('owl.carousel');
          owlData.settings.autoplay = false; //don't know if both are necessary
          owlData.options.autoplay = false;
          owl.trigger('refresh.owl.carousel');
        }
      }
  });

});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.0/owl.carousel.min.js"></script>

style.css

/* CSS FOR DEMO ONLY */
body {
  font-family: Arial, sans-serif;
}
.animated  {
  -webkit-animation-duration : 3s  ;
  animation-duration : 3s  ;

  -webkit-animation-delay : 500ms  ;
  animation-delay : 500ms  ;
}

.animate-out {
  -webkit-animation-delay : 0ms  ;
  animation-delay : 0ms  ;
}

h4 {
  font-size: 28px;
}

p {
  width: 50%;
  text-align: center;
  margin: 0 auto 20px;
}

.owl-item {
  display: table;
}

.owl-carousel .item {
  height: 80vh;
  background-color: #fc0;
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

.btn {
  display: inline-block;
  line-height: 35px;
  height: 35px;
  text-align: center;
  padding: 0 20px;
  width: auto;
  background-color: #000;
  text-decoration: none;
  color: #fff;
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.0/assets/owl.theme.default.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.0/assets/owl.carousel.min.css" rel="stylesheet" />