JSFiddle - React, Tailwind, and code Playground

by Mukul kant

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css">
<div class='slider'>
  <div>Slide 1</div>
  <div>Slide 2</div>
  <div>Slide 3</div>
  <div>Slide 4</div>
  <div>Slide 5</div>
</div>

<div class='slider-nav'>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

CSS

/*Slider*/
body{
  background:#ccc;
}
.slider > div {
  display:block; width:100%; padding: 50px 0;
  background: #FF0;
  text-align: center; font-size: 2em;
}

/* Navigation */
.slider-nav { text-align: center; }
.slider-nav > div {
  display:inline-block;
  width:30px; height: 30px; margin: 0 5px; padding: 3px 0;
  text-align: center; font-size:2em;
  background: #FC0; cursor: pointer;
}

JavaScript

//Slick slider initialize
$('.slider').slick({
  arrows:false, dots: false, infinite:true, speed:500,
  autoplay:true, autoplaySpeed: 3000, slidesToShow:1, slidesToScroll:1
});
//On click of slider-nav childern,
//Slick slider navigate to the respective index.
$('.slider-nav > div').click(function() {
	$('.slider').slick('slickGoTo',$(this).index());
})