JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//www.owlcarousel.owlgraphic.com/assets/owlcarousel/assets/owl.carousel.min.css">
<link rel="stylesheet" href="//www.owlcarousel.owlgraphic.com/assets/owlcarousel/assets/owl.theme.default.min.css">
<script src="//www.owlcarousel.owlgraphic.com/assets/owlcarousel/owl.carousel.js"></script>
<div class="owl-carousel">
    <div class="item">
        <img src="http://i.imgur.com/e2iYEjy.jpg">
    </div>
    <div class="item">
        <img src="http://i.imgur.com/e2iYEjy.jpg" >
    </div>
    <div class="item">
        <img src="http://i.imgur.com/e2iYEjy.jpg">
    </div>
    <div class="item">
        <img src="http://i.imgur.com/e2iYEjy.jpg">
    </div>
    <div class="item">
        <img src="http://i.imgur.com/e2iYEjy.jpg">
    </div>
    <div class="item">
        <img src="http://i.imgur.com/e2iYEjy.jpg">
    </div>
    <div class="item">
        <img src="http://i.imgur.com/e2iYEjy.jpg">
    </div>
    <div class="item">
        <img src="http://i.imgur.com/e2iYEjy.jpg">
    </div>
</div>

CSS

.owl-carousel{
  padding:20px;
}
.owl-carousel .item{
  width:122px;
    height:160px;
}
.owl-carousel .owl-item{
  width:122px;
    height:160px;
}

JavaScript

$('.owl-carousel').owlCarousel({
    smartSpeed: 1000,
    lazyLoad: true,
    //rtl: true,
    loop: true,
    dots: false,
    responsiveClass: true,
    responsive: {
        0: {
            items: 1,
            nav: false
        },
        600: {
            items: 4,
            nav: false
        },
        1000: {
            items: 6,
            nav: false,
            loop: false
        },
        480: {
            items: 1,
            nav: false,
            loop: false
        },

    }
})