JSFiddle - React, Tailwind, and code Playground

by thekenwheeler

HTML

<script src="http://kenwheeler.github.io/slick/slick/slick.js"></script>
<link rel="stylesheet" href="http://kenwheeler.github.io/slick/slick/slick.css">
<body>
    <div class="slickWrapper">
    <div class="imageWrapper"><img src="~/Images/SlickImages/One.jpg" alt="Cabal Therapy" class="slickImg" /></div>
    <div class="imageWrapper"><img src="~/Images/SlickImages/Two.jpg" alt="Tarzan Hamster" class="slickImg" /></div>
    <div class="imageWrapper"><img src="~/Images/SlickImages/Three.jpg" alt="Lilliana Vess" class="slickImg" /></div>
    <div class="imageWrapper"><img src="~/Images/SlickImages/Four.jpg" alt="Pernicious Deed" class="slickImg" /></div>
    <div class="imageWrapper"><img src="~/Images/SlickImages/Five.jpg" alt="Cute Hamster" class="slickImg" /></div>
</div>
</body>

CSS

/* Slick Plugin Styles -----------------*/
.slickWrapper
{
    margin: auto;
    text-align: center;
    width: 450px;
}

.imageWrapper
{
    margin: auto;
    text-align: center;
    width: 450px;
}

.slickImg
{
    background: red;
    width: 450px;
    height: 300px;
}

JavaScript

$(document).ready(function(){
    $(".slickWrapper").slick({
        fade: true,
        slidesToShow: 1,
        slidesToScroll: 1,
        speed: 1000,
        dots: true,
        infinite: true,
        autoplay: true,
        autoplaySpeed: 2000,
        slide: ".imageWrapper",
        arrows: true
    });
});