JSFiddle - React, Tailwind, and code Playground

by Sambora

HTML

<link rel="stylesheet" href="//owlcarousel.owlgraphic.com/assets/owlcarousel/assets/owl.theme.default.min.css">
<link rel="stylesheet" href="//owlcarousel.owlgraphic.com/assets/owlcarousel/assets/owl.carousel.min.css">
<script src="//owlcarousel.owlgraphic.com/assets/owlcarousel/owl.carousel.js"></script>
<div id="owl" class="owl-carousel">
    <div>
        <img src="http://www.webdesignburn.com/wp-content/uploads/2015/07/baby-1.jpg" class="img-responsive">
        <div class="caption">
            	<h2><a href="#" rel="nofollow" title="برای دومین بار " target="_blank">caption</a></h2>

        </div>
    </div>
</div>

JavaScript

$("#owl").owlCarousel({
			animateOut: 'slideOutDown',
			animateIn: 'flipInX',
			nav:false,
			singleItem: true,
			autoplay:true,
			items:1,
			stagePadding:0,
			smartSpeed:450,
			lazyLoad: true,
			rtl:true,
			loop:true,
			dots:false,
    });