JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://yastatic.net/jquery/2.2.0/jquery.min.js"></script>
<script src="https://yastatic.net/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="http://owlgraphic.com/owlcarousel/owl-carousel/owl.carousel.min.js"></script>
<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">
<link rel="stylesheet" href="https://yastatic.net/bootstrap/3.3.6/css/bootstrap.min.css">
<div id="sync1" class="owl-carousel">
  <div class="item"><h1>1</h1></div>
  <div class="item"><h1>2</h1></div>
  <div class="item"><h1>3</h1></div>
  <div class="item"><h1>4</h1></div>
  <div class="item"><h1>5</h1></div>
  <div class="item"><h1>6</h1></div>
  <div class="item"><h1>7</h1></div>

</div>
<ul id="sync2" class="owl-carousel nav nav-pills nav-justified">
  <li class="item">Lorem ipsum</li>
  <li class="item">Lorem ipsum dolor sit amet</li>
   <li class="item">Lorem ipsum dolor sit amet</li>
  <li class="item">Lorem ipsum dolor sit amet</li>
   <li class="item">Lorem ipsum dolor sit amet</li>
  <li class="item">Lorem ipsum dolor sit amet</li>
  <li class="item">Lorem ipsum dolor sit amet</li>
 
</ul>

CSS

#sync1 .item{
    background: #0c83e7;
    padding: 80px 0px;
  
    color: #FFF;

    text-align: center;
}
#sync2 .item{
    background: #C9C9C9;
    padding: 10px 0px;

    color: #FFF;

    text-align: center;
    cursor: pointer;
}
#sync2 .item h1{
  font-size: 18px;
}
#sync2 .synced .item{
  background: #0c83e7;
}

#owl-demo .item img{
  display: block;
  width: 100%;
  height: auto;
}
#bar{
  width: 0%;
  max-width: 100%;
  height: 4px;
  background: #7fc242;
}
#progressBar{
  width: 100%;
  background: #EDEDED;
}

JavaScript

$(document).ready(function() {
 
  var sync1 = $("#sync1");
  var sync2 = $("#sync2");
 
  sync1.owlCarousel({
      afterInit : progressBar,
      afterMove : moved,
      startDragging : pauseOnDragging,   
    singleItem : true,
     //navigation: true,
   pagination:false,
    afterAction : syncPosition,
    responsiveRefreshRate : 200,
  });
 
  sync2.owlCarousel({
    items : 5,
    itemsDesktop      : [1199,5],
    itemsDesktopSmall     : [979,4],
    itemsTablet       : [768,3],
    itemsMobile       : [479,3],
    pagination:false,
    responsiveRefreshRate : 100,
    afterInit : function(el){
      el.find(".owl-item").eq(0).addClass("synced");
    }
  });
  
  
       sync2.on('mouseover',function(){
      isPause = true;
    });
    sync2.on('mouseout',function(){
      isPause = false;
    });
  
  
  
 
  function syncPosition(el){
    var current = this.currentItem;
    $("#sync2")
      .find(".owl-item")
      .removeClass("synced")
      .eq(current)
      .addClass("synced")
    if($("#sync2").data("owlCarousel") !== undefined){
      center(current)
    }
  }
 
  $("#sync2").on("click", ".owl-item", function(e){
    e.preventDefault();
    var number = $(this).data("owlItem");
    sync1.trigger("owl.goTo",number);
  });
 
  function center(number){
    var sync2visible = sync2.data("owlCarousel").owl.visibleItems;
    var num = number;
    var found = false;
    for(var i in sync2visible){
      if(num === sync2visible[i]){
        var found = true;
      }
    }
 
    if(found===false){
      if(num>sync2visible[sync2visible.length-1]){
        sync2.trigger("owl.goTo", num - sync2visible.length+2)
      }else{
        if(num - 1 === -1){
          num = 0;
        }
        sync2.trigger("owl.goTo", num);
      }
    } else if(num === sync2visible[sync2visible.length-1]){
      sync2.trigger("owl.goTo", sync2visible[1])
    } else if(num === sync2visible[0]){
      sync2.trigger("owl.goTo", num-1)
    }
    
  }
 
 var time = 5; // time in...