JSFiddle - React, Tailwind, and code Playground

by Marcin Gościcki

HTML

<link rel="stylesheet" href="https://rawgit.com/kenwheeler/slick/master/slick/slick.css">
<script src="https://rawgit.com/kenwheeler/slick/master/slick/slick.min.js"></script>
<link href="https://rawgit.com/kenwheeler/slick/master/slick/slick.css" rel="stylesheet"/>
<div class="test">
    <div class="option">
        <p>Test 1</p>
    </div>
    <div class="option">
        <p>Test 1 -</p>
    </div>
    <div class="option">
        <p>Test 1 -</p>
    </div>
    <ul class="tabs">
      <li class="tab slide-0 active-slide">
        <a href="#">1. Slide 0</a>
      </li>
      <li class="tab slide-1 inactive-slide">
        <a href="#">1. Slide 1</a>
      </li>
      <li class="tab slide-2 inactive-slide">
        <a href="#">1. Slide 2</a>
      </li>
    </ul>
</div>
<div class="test">
    <div class="option">
        <p>Test 2</p>
    </div>
    <div class="option">
        <p>Test 2 -</p>
    </div>
    <ul class="tabs">
      <li class="tab slide-0 active-slide">
        <a href="#">2. Slide 0</a>
      </li>
      <li class="tab slide-1 inactive-slide">
        <a href="#">2. Slide 1</a>
      </li>
    </ul>
</div>
<div class="test">
    <div class="option">
        <p>Test 3</p>
    </div>
    <div class="option">
        <p>Test 3 -</p>
    </div>
    <ul class="tabs">
      <li class="tab slide-0 active-slide">
        <a href="#">3. Slide 0</a>
      </li>
      <li class="tab slide-1 inactive-slide">
        <a href="#">3. Slide 1</a>
      </li>
    </ul>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/kenwheeler/slick/master/slick/slick.min.js"></script>

CSS

.effect {
    margin: 5px 0;
    height: 70px;
    width: 320px;
    text-align: center;
}
.option {
    border: 1px solid grey;
    height: 50px;
    width: 150px;
    background: #eee;
}

.tab {
  padding: 20px;
  display: inline-block;
}
.inactive-slide {
  border-bottom: 1px solid red;
}

.active-slide {
  border-top: 1px solid red;
  border-bottom: 0;
}

JavaScript

$('.test').each(function (idx, item) {
    var carouselId = "carousel" + idx;
    this.id = carouselId;
    $(this).slick({
        slide: "#" + carouselId +" .option",
        adaptiveHeight: true,
        autoplay: false,
        arrows: false,
        dots: true
    });
});

$('.test').on('beforeChange', function(event, slick, currentSlide, nextSlide){
	  $(this).find('.tab').removeClass('active-slide').addClass('inactive-slide')
    			 .eq(nextSlide).toggleClass('active-slide inactive-slide');
});

$(".tabs li a").click(function(){
  var slideIndex = $(this).parent().index();
  $(this).closest('.test').slick('slickGoTo', parseInt(slideIndex));
});