JSFiddle - React, Tailwind, and code Playground

by Dedi Wibisono

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css">
<script src="cdn.jsdelivr.net/jquery.slick/1.5.5/slick.min.js"></script>
<div class="slider">
  <div class="slide">
    <img src="http://fillmurray.com/300/300" alt="" class="img-responsive" />
    <h1>slide 1</h1>
  </div>
  <div class="slide">
    <img src="http://fillmurray.com/300/300" alt="" class="img-responsive" />
    <h1>slide 2</h1>
  </div>
  <div class="slide">
    <img src="http://fillmurray.com/300/300" alt="" class="img-responsive" />
    <h1>slide 3</h1>
  </div>
  <div class="slide">
    <img src="http://fillmurray.com/300/300" alt="" class="img-responsive" />
    <h1>slide 4</h1>
  </div>
  <div class="slide">
    <img src="http://fillmurray.com/300/300" alt="" class="img-responsive" />
    <h1>slide 5</h1>
  </div>
</div>

CSS

html,
body {
  background: #102131;
  text-align: center;
}

.slider {
  width: 400px;
  margin: 20px auto;
  padding: 20px;
  color: white;
}

.slider img {
  display: block;
  margin: auto;
}

JavaScript

$('.slider').slick({
  dots: true
});

$('.slide').on('click', function() {
  $('.slider').slick('slickRemove', $('.slick-slide').index(this) - 1);
});