JSFiddle - React, Tailwind, and code Playground

by NOVUSIDEA

HTML

<link rel="stylesheet" href="https://unpkg.com/[email protected]/slick/slick.css">
<link rel="stylesheet" href="https://unpkg.com/[email protected]/slick/slick-theme.css">
<script src="https://unpkg.com/[email protected]/dist/jquery.slim.min.js"></script>
<script src="https://unpkg.com/[email protected]/slick/slick.min.js"></script>
<div class="slider-for">
    <img src="https://source.unsplash.com/random/800x300?1" alt="">
    <img src="https://source.unsplash.com/random/800x300?2" alt="">
</div>

<div class="slider-nav">
    <img src="https://source.unsplash.com/random/100x100?1" alt="">
    <img src="https://source.unsplash.com/random/100x100?2" alt="">
</div>

CSS

img {
    width: 100%;
    height: auto;
    display: block;
}

JavaScript

jQuery(document).ready(function($) {

    $('.slider-for').slick({
        slidesToShow: 1,
        slidesToScroll: 1,
        arrows: false,
        fade: false,
        asNavFor: '.slider-nav'
    });

    $('.slider-nav').slick({
        slidesToShow: 5,
        slidesToScroll: 1,
        variableWidth: true,
        centerMode: false,
        autoplay: false,
        infinite: false,
        dots: false,
        arrows: false,
        draggable: false,
        focusOnSelect: true,
        asNavFor: '.slider-for'
    });

});