JSFiddle - React, Tailwind, and code Playground

by yoowordpress

HTML

<link rel="stylesheet" href="http://owlgraphic.com/owlcarousel/owl-carousel/owl.carousel.css">
<link rel="stylesheet" href="http://owlgraphic.com/owlcarousel/owl-carousel/owl.theme.css">
<script src="http://owlgraphic.com/owlcarousel/owl-carousel/owl.carousel.js"></script>
<div id="owl-demo" class="owl-carousel">
     <div class="item"><img src="http://owlgraphic.com/owlcarousel/demos/assets/fullimage1.jpg" alt="The Last of us"></div>
      <div class="item"><img src="http://owlgraphic.com/owlcarousel/demos/assets/fullimage2.jpg" alt="GTA V"></div>
       <div class="item"><img src="http://owlgraphic.com/owlcarousel/demos/assets/fullimage3.jpg" alt="Mirror Edge"></div>
</div>
          

<button class="go" data-go="0">один</button>
<button class="go" data-go="1">два</button>
<button class="go" data-go="2">три</button>

CSS

.go.active{
    color:red;
}

JavaScript

$(document).ready(function() {
     var carousel = $("#owl-demo");
        
      carousel.owlCarousel({
     
          navigation : false, // Show next and prev buttons
          slideSpeed : 300,
          paginationSpeed : 400,
          singleItem:true

     
      });
        
$('.go').click(function(){
    var $el =  $(this);
    carousel.trigger('owl.goTo',$el.data('go'));
    $el.addClass('active').siblings().removeClass('active');
});
     
 });