JSFiddle - React, Tailwind, and code Playground

by kodjoe mambi

HTML

<link rel="stylesheet" href="https://kenwheeler.github.io/slick/slick/slick.css">
<link rel="stylesheet" href="https://kenwheeler.github.io/slick/slick/slick-theme.css">
<link rel="stylesheet" href="https://kenwheeler.github.io/slick/css/style.css">
<script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="https://kenwheeler.github.io/slick/slick/slick.js"></script>
<link rel="stylesheet" href="https://kenwheeler.github.io/slick/css/prism.css">
<section id="features" class="blue">
<div class="content">
<div class="slider slider-2">
					<div><h3>1</h3></div>
					<div><h3>2</h3></div>
					<div><h3>3</h3></div>
					<div><h3>4</h3></div>
					<div><h3>5</h3></div>
					<div><h3>6</h3></div>
					<div><h3>7</h3></div>
					<div><h3>8</h3></div>
</div>
</div>
</section>

CSS

.slick-arrow.slick-disabled {
  display: none !important;
}

JavaScript

$(document).ready(function() {

var slider2 = $('.slider-2').slick({
        dots: true,
        infinite: true,
        autoplay: true,
        autoplaySpeed: 2000,
        pauseOnFocus: false,
        pauseOnHover: false,
        pauseOnDotsHover: false,
        slidesToShow: 1,
        slidesToScroll: 1,
        fade: true,
        cssEase: 'linear'
    });

slider2.on('afterChange', function(event, slick, currentSlide){
  // slick - is a slider object with a lot of useful info
  // currentSlide - is a current slide index (starts from 0)
  if( slick.slideCount === currentSlide + 1 ){
         alert('Instead of showing alert goto slide 1.');
  }
});

});