JSFiddle - React, Tailwind, and code Playground

by anish274

HTML

<link rel="stylesheet" href="cdn.jsdelivr.net/jquery.slick/1.3.6/slick.css">
<script src="cdn.jsdelivr.net/jquery.slick/1.3.6/slick.min.js"></script>
<div class="slider responsive slick-initialized slick-slider">
					<div class="slick-list draggable" tabindex="0"><div class="slick-track" style="opacity: 1; width: 1120px; -webkit-transform: translate3d(0px, 0px, 0px);"><div class="slick-slide slick-active" style="width: 140px;"><h3>1</h3></div><div class="slick-slide slick-active" style="width: 140px;"><h3>2</h3></div><div class="slick-slide slick-active" style="width: 140px;"><h3>3</h3></div><div class="slick-slide slick-active" style="width: 140px;"><h3>4</h3></div><div class="slick-slide" style="width: 140px;"><h3>5</h3></div><div class="slick-slide" style="width: 140px;"><h3>6</h3></div><div class="slick-slide" style="width: 140px;"><h3>7</h3></div><div class="slick-slide" style="width: 140px;"><h3>8</h3></div></div></div>
					
					
					
					
					
					
					
				<button type="button" class="slick-prev slick-disabled" style="display: block;">Previous</button><button type="button" class="slick-next" style="display: block;">Next</button><ul class="slick-dots" style="display: block;"><li class="slick-active"><button type="button">1</button></li><li><button type="button">2</button></li></ul></div>

JavaScript

$('.responsive').slick({
  dots: true,
  infinite: false,
  speed: 300,
  slidesToShow: 4,
  slidesToScroll: 4,
  responsive: [
    {
      breakpoint: 1024,
      settings: {
        slidesToShow: 3,
        slidesToScroll: 3,
        infinite: true,
        dots: true
      }
    },
    {
      breakpoint: 600,
      settings: {
        slidesToShow: 2,
        slidesToScroll: 2
      }
    },
    {
      breakpoint: 480,
      settings: {
        slidesToShow: 1,
        slidesToScroll: 1
      }
    }
  ]
});