JSFiddle - React, Tailwind, and code Playground

by nyothecat

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.js"></script>
    <div class="container-fluid top-slider">
        <div class="row">
            <div class="center">
                <div>A</div>
                <div>B</div>
                <div>C</div>
                <div>D</div>
                <div>E</div>
                <div>F</div>
            </div>
        </div>
    </div>

JavaScript

$(document).ready(function(){
            $('.center').slick({
                centerMode: true,
                centerPadding: '30px',
                slidesToShow: 3,
                autoplay: true,
                autoplaySpeed: 4000,
                arrows: true,
                responsive: [
                    {
                        breakpoint: 768,
                        settings: {
                            arrows: false,
                            centerMode: true,
                            centerPadding: '30px',
                            slidesToShow: 3
                        }
                    },
                    {
                        breakpoint: 480,
                        settings: {
                            arrows: false,
                            centerMode: true,
                            centerPadding: '30px',
                            slidesToShow: 1
                        }
                    }
                ]
            });
        });