Owl Carousel 2 - Fade vs Slide

HTML

<link rel="stylesheet" href="//cdn.rawgit.com/smashingboxes/OwlCarousel2/2.0.0-beta.3/dist/assets/owl.carousel.css">
<link rel="stylesheet" href="//cdn.rawgit.com/smashingboxes/OwlCarousel2/2.0.0-beta.3/dist/assets/owl.theme.default.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//cdn.rawgit.com/smashingboxes/OwlCarousel2/2.0.0-beta.3/dist/owl.carousel.js"></script>
<div class="owl-carousel owl-theme">
  <div class="item">
    <img src="http://placehold.it/350x150/c25353/&text=1" />
  </div>
  <div class="item">
    <img src="http://placehold.it/350x150/537ac2/&text=2" />
  </div>
  <div class="item">
    <img src="http://placehold.it/350x150/65c253/&text=3" />
  </div>
  <div class="item">
    <img src="http://placehold.it/350x150/d6d56d/&text=4" />
  </div>
  <div class="item">
    <img src="http://placehold.it/350x150/cd6dd6/&text=5" />
  </div>
</div>

CSS

BODY {
  background-color: white;
}

JavaScript

var carousel = $('.owl-carousel').owlCarousel({
  items: 1,
  margin: 10,
  nav: true,
  dots: false,
  loop: true,
	navSpeed: 1500,
  animateOut: 'slideOutDown',
    animateIn: 'flipInX',
  responsive: {
      600: { 
          animateOut: 'fadeOut',
          animateIn: 'fadeIn',
      	  dots: true,
      },
  },
  
});