JSFiddle - React, Tailwind, and code Playground

by Chintan Upadhayay

HTML

<link rel="stylesheet" href="http://cdn.jsdelivr.net/jquery.slick/1.5.0/slick.css">
<script src="http://kenwheeler.github.io/slick/slick/slick.js"></script>
<div class="slider slider-for">
    <div>
        <h3>1</h3>
    </div>
    <div>
        <h3>2</h3>
    </div>
    <div>
        <h3>3</h3>
    </div>
    <div>
        <h3>4</h3>
    </div>
    <div>
        <h3>5</h3>
    </div>
    <div>
        <h3>6</h3>
    </div>
</div>
<div class="slider slider-nav">
    <div>
        <h3>1</h3>
    </div>
    <div>
        <h3>2</h3>
    </div>
    <div>
        <h3>3</h3>
    </div>
    <div>
        <h3>4</h3>
    </div>
    <div>
        <h3>5</h3>
    </div>
    <div>
        <h3>6</h3>
    </div>
</div>

JavaScript

$('.slider-for').slick({
       slidesToShow: 1,
       slidesToScroll: 1,
       arrows: false,
       fade: true,
       accessibility: false
   });
   $('.slider-nav').slick({
       slidesToShow: 5,
       slidesToScroll: 1,
       asNavFor: '.slider-for',
       dots: false,
       centerMode: false,
       infinite: false,
       focusOnSelect: false
   });
   
	$('.slider-nav .slick-slide').on('click', function (event) {
    $('.slider-for').slick('slickGoTo', $(this).data('slickIndex'));
	});