JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.6/slick.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.6/slick.min.css">
<div class="example example1">
    <p>If slidesToShow < the total number of slides, sliding the <em>top</em> carousel will also move the <em>bottom</em> carousel, shifting the <strong>.slick-current</strong> class to the current slide.</p>
    <div class="slider slider-for">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
    </div>
    <div class="slider slider-nav">
        <div><p>1</p></div>
        <div><p>2</p></div>
        <div><p>3</p></div>
        <div><p>4</p></div>
    </div>
</div>

<div class="example example2">
    <p>However if slidesToShow == the total number of slides, the .slick-current class is <strong>not</strong> shifted when the top carousel is slid:</p>
    <div class="slider slider-for">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
    </div>
    <div class="slider slider-nav">
        <div><p>1</p></div>
        <div><p>2</p></div>
        <div><p>3</p></div>
        <div><p>4</p></div>
    </div>
</div>

CSS

.example {margin:20px 50px 70px;}
.slider-for {margin-bottom:20px;}
.slider-for div {
    background:blue;
    color:white;
    text-align:center;
    padding:5px 10px;
}
.slider-nav p {
    background:red;
    color:white;
    text-align:center;
    margin:10px;
    padding:10px 0;
}
.slider-nav .slick-current {
    background:yellow;
}

JavaScript

jQuery('.example1 .slider-for').slick({
    slidesToShow: 1,
    slidesToScroll: 1,
    fade: false,
    asNavFor: '.example1 .slider-nav',
    dots: false,
    arrows:true,    
    appendArrows: '.pr_images',
    prevArrow:'<i class="fa fa-angle-left slick-prev"></i>',
    nextArrow:'<i class="fa fa-angle-right slick-next"></i>'
});
jQuery('.example1 .slider-nav').slick({
    slidesToShow: 3,
    slidesToScroll: 1,
    asNavFor: '.example1 .slider-for',
    dots: false,
    arrows:false,
    centerMode: false,
    focusOnSelect: true
});

jQuery('.example2 .slider-for').slick({
    slidesToShow: 1,
    slidesToScroll: 1,
    fade: false,
    asNavFor: '.example2 .slider-nav',
    dots: false,
    arrows:true,    
    appendArrows: '.pr_images',
    prevArrow:'<i class="fa fa-angle-left slick-prev"></i>',
    nextArrow:'<i class="fa fa-angle-right slick-next"></i>'
});
jQuery('.example2 .slider-nav').slick({
    slidesToShow: 4,
    slidesToScroll: 1,
    asNavFor: '.example2 .slider-for',
    dots: false,
    arrows:false,
    centerMode: false,
    focusOnSelect: true
});