JSFiddle - React, Tailwind, and code Playground

by Yunus Gaziev

HTML

<link rel="stylesheet" href="http://www.owlcarousel.owlgraphic.com/assets/owlcarousel/assets/owl.carousel.min.css">
<link rel="stylesheet" href="http://www.owlcarousel.owlgraphic.com/assets/owlcarousel/assets/owl.theme.default.min.css">
<script src="http://www.owlcarousel.owlgraphic.com/assets/owlcarousel/owl.carousel.js"></script>
<link rel="stylesheet" href="http://www.owlcarousel.owlgraphic.com/assets/css/docs.theme.min.css">
<!--  Demos -->
    <section id="demos">
      <div class="row">
        <div class="large-12 columns">
          <div class="owl-carousel">
            <div class="item">
              <h4>1</h4>
            </div>
            <div class="item">
              <h4>2</h4>
            </div>
            <div class="item">
              <h4>3</h4>
            </div>
            <div class="item">
              <h4>4</h4>
            </div>
            <div class="item">
              <h4>5</h4>
            </div>
            <div class="item">
              <h4>6</h4>
            </div>
            <div class="item">
              <h4>7</h4>
            </div>
            <div class="item">
              <h4>8</h4>
            </div>
            <div class="item">
              <h4>9</h4>
            </div>
            <div class="item">
              <h4>10</h4>
            </div>
            <div class="item">
              <h4>11</h4>
            </div>
            <div class="item">
              <h4>12</h4>
            </div>
          </div>
        </div>
    </div>
</section>

CSS

.owl-item {
    opacity: .8;
    transition: opacity 1s;
}
.owl-item.active.center {
    opacity: 1;
}

.smooth-slide .item {
    opacity: 1 ! important;
}

JavaScript

var owl = $('.owl-carousel');

owl.owlCarousel({
    center: true,
    items:2,
    loop:true,
    nav: true,
    dots: false,
    margin:0,
    smartSpeed: 1000,
    responsive:{
        1000:{
            items:3
        }
    }
});

owl.on('changed.owl.carousel', function(event) {
    $('.owl-item').css({'opacity': '.8'});
    $('.owl-item').eq(event.item.index).css({'opacity': '1'});
});