JSFiddle - React, Tailwind, and code Playground

by Minsup Kim

HTML

<script src="https://owlcarousel2.github.io/OwlCarousel2/assets/vendors/jquery.min.js"></script>
<script src="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/owl.carousel.js"></script>
<link rel="stylesheet" href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.carousel.min.css">
<link rel="stylesheet" href="https://owlcarousel2.github.io/OwlCarousel2/assets/css/docs.theme.min.css">
<link rel="stylesheet" href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.theme.default.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/js/swiper.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/css/swiper.min.css">
<div class="swiper-container">
    <div class="swiper-wrapper">
        <!-- Slides -->
        <div class="swiper-slide on"><a href="#1">Slide 1</a></div>
        <div class="swiper-slide"><a href="#2">Slide 2</a></div>
        <div class="swiper-slide"><a href="#3">Slide 3</a></div>
        <div class="swiper-slide"><a href="#4">Slide 4</a></div>
        <div class="swiper-slide"><a href="#5">Slide 5</a></div>
        <div class="swiper-slide"><a href="#6">Slide 6</a></div>
        <div class="swiper-slide"><a href="#7">Slide 7</a></div>
        <div class="swiper-slide"><a href="#8">Slide 8</a></div>
   </div> 
</div>

<div class="owl-carousel tab2 owl-theme">
    <div class="item" data-hash="1">1</div>
    <div class="item" data-hash="2">2</div>
    <div class="item" data-hash="3">3</div>
    <div class="item" data-hash="4">4</div>
    <div class="item" data-hash="5">5</div>
    <div class="item" data-hash="6">6</div>
    <div class="item" data-hash="7">7</div>
    <div class="item" data-hash="8">8</div>
</div>

<div class="swiper-container">
    <div class="swiper-wrapper">
        <!-- Slides -->
        <div class="swiper-slide on"><a href="#t1">Slide 1</a></div>
        <div class="swiper-slide"><a href="#t2">Slide...

CSS

.on a {color:#ff0000}

JavaScript

$(function(){

	var $owl = $(".owl-carousel");
 
  $owl.owlCarousel({
    items:1,
    dots:false,
    nav:false,
    loop:false,
    margin:10,
    URLhashListener:true,
    autoplayHoverPause:true,
    startPosition: 'URLHash'
  }); 
 
  $owl.on('changed.owl.carousel', function(property) {
    var idx = property.item.index;
    var $this = $(this);
    var $btn = $this.prev(".swiper-container").find(".swiper-wrapper").find(".swiper-slide");
    var swiperIdx = $this.index(".owl-carousel");
    
    $btn.removeClass("on");
    $btn.eq(idx).addClass("on");
    
		mySwiper[swiperIdx].slideTo(idx);  
  });

  var mySwiper = new Swiper ('.swiper-container', {
    slidesPerView: 5,
    spaceBetween: 0,
    freeMode: false,
    pagination: false   	
  });

});