JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://kenwheeler.github.io/slick/slick/slick.css">
<script src="https://kenwheeler.github.io/slick/slick/slick.js"></script>
<div class="slider">
<div class="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><h3>7</h3></div>
      <div><h3>8</h3></div>
      <div><h3>9</h3></div>
      <div><h3>10</h3></div>
      <div><h3>11</h3></div>
      <div><h3>12</h3></div>
    </div>
    <div class="slider-nav">
      <div data-thumb="1"><h3>1</h3></div>
      <div data-thumb="2"><h3>2</h3></div>
      <div data-thumb="3"><h3>3</h3></div>
      <div data-thumb="4"><h3>4</h3></div>
      <div data-thumb="5"><h3>5</h3></div>
      <div data-thumb="6"><h3>6</h3></div>
      <div data-thumb="7"><h3>7</h3></div>
      <div data-thumb="8"><h3>8</h3></div>
      <div data-thumb="9"><h3>9</h3></div>
      <div data-thumb="10"><h3>10</h3></div>
      <div data-thumb="11"><h3>11</h3></div>
      <div data-thumb="12"><h3>12</h3></div>
    </div>
      </div>

CSS

body {
  background: gray;
}
.slider {
  font-family:Arial;
  width:500px;
  display:block;
  margin:0 auto;
}
.slider h3 {
    background: #fff;
    color: #3498db;
    font-size: 36px;
    line-height: 100px;
    margin: 10px;
    padding: 2%;
    position: relative;
    text-align: center;
}

.slider .action{
  display:block;
  margin:100px auto;
  width:100%;
  text-align:center;
}
.slider .action a {
  display:inline-block;
  padding:5px 10px; 
  background:#f30;
  color:#fff;
  text-decoration:none;
}
.slider .action a:hover{
  background:#000;
}
.slick-active {
  border:1px solid red
}

JavaScript

$('.slider-for').slick({
    autoplay: true,
    autoplaySpeed:1000,
    speed:700,
    mobileFirst: true,
    slidesToScroll: 1,
    slidesToShow: 1,
    rows: 1,
    fade: true,
    swipeToSlide: true,
    infinite: false,
    focusOnSelect: true,
    pauseOnHover:false,
    arrows: false,
    dots: false,
    asNavFor: '.slider-nav'
  	});

  	$('.slider-nav').slick({
    autoplay: false,
    autoplaySpeed:9000,
    speed:700,
    mobileFirst: true,
    slidesToScroll: 1,
    slidesToShow: 2,
    rows: 3,
    swipeToSlide: true,
    infinite: false,
    focusOnSelect: true,
    pauseOnHover:false,
    arrows: true,
    dots: true,
     asNavFor: '.slider-for'
		});
		$('.slick').slick();
		var $parent = $(".slider-for");
		var $nav = $(".slider-nav");
		var $content = $nav.find("div");
			var killit = false;
		$content.on("click", function(e){
    if( !killit ) {
        e.stopPropagation();
        var idx = $(this).data("thumb");
        $parent.slick("goTo", idx-1);
    }
		});
		$nav
    .on("beforeChange", function() {
        killit = true;
    }).on("afterChange", function() {
        killit = false;
    });