JSFiddle - React, Tailwind, and code Playground

by shamaleyte

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/jquery.slick/1.3.15/slick.css">
<script src="https://cdn.jsdelivr.net/jquery.slick/1.3.15/slick.min.js"></script>
<ul class="door-styles">
<li class="active">Raised Panel Short</li>
<li>Raised Panel Long</li>
<li>Stamped Carriage House Short</li>
<li>Planks</li>
<li>Flush Overlay</li>
<li>Stamped Carriage House Long</li>
</ul>

CSS

.door-styles {
    width: 650px;
    margin: 0 auto;
}

li {
    width: 200px;
    height: 200px;
}

JavaScript

$('.door-styles').slick({
    slidesToShow: 3,
    slidesToScroll: 3,
    dots: true,
    infinite: true,
    cssEase: 'linear',
      slide: 'li'
});