JSFiddle - React, Tailwind, and code Playground

by Danish Farman

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.js"></script>
<script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
<div class="row fullwidth">
    <div class="columns small-12 slider">
      <div class="text-center slide" style="background: url('https://placehold.it/1600x650&text=[Slide1]');">
        <h1>Slide 1 heading</h1>
        <p>Slide 1 text</p>
      </div>
      <div class="text-center slide" style="background: url('https://placehold.it/1600x650&text=[Slide2]');">
        <h1>Slide 2 heading</h1>
        <p>Slide 2 text</p>
      </div>
      <div class="text-center slide" style="background: url('https://placehold.it/1600x650&text=[Slide3]');">
        <h1>Slide 1 heading</h1>
        <p>Slide 1 text</p>
      </div>
      <div class="text-center slide" style="background: url('https://placehold.it/1600x650&text=[Slide4]');">
        <h1>Slide 1 heading</h1>
        <p>Slide 1 text</p>
      </div>
      <div class="text-center slide" style="background: url('https://placehold.it/1600x650&text=[Slide5]');">
        <h1>Slide 1 heading</h1>
        <p>Slide 1 text</p>
      </div>
      <div class="text-center slide" style="background: url('https://placehold.it/1600x650&text=[Slide6]');">
        <h1>Slide 1 heading</h1>
        <p>Slide 1 text</p>
      </div>
      <div class="text-center slide" style="background: url('https://placehold.it/1600x650&text=[Slide7]');">
        <h1>Slide 1 heading</h1>
        <p>Slide 1 text</p>
      </div>
      <div class="text-center slide" style="background: url('https://placehold.it/1600x650&text=[Slide8]');">
        <h1>Slide 1 heading</h1>
        <p>Slide 1 text</p>
      </div>
    </div>
  </div>

CSS

.fullwidth {
    width: 100%;
    margin-left: auto;
	margin-right: auto;
	max-width: initial;
}
.slider {margin: 0;}
.slider .slide {width: 100%; height: 100%;}

.slick-prev {
    left: 0;
    background: red;
}
.slick-next {
    right: 0;
    background: red;
}
.slick-dots {
  bottom: 0px;
  margin-left: 0; /* Fixes the visible horizontal scroll bar */
}

JavaScript

$(function() {
$('.slider').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
      }
    }
    // You can unslick at a given breakpoint now by adding:
    // settings: "unslick"
    // instead of a settings object
  ]
});
});