JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css">
<script src="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script>
<div class="slider">
  <div>111</div>
  <div>111</div>
  <div>111</div>
  <div>111</div>
  <div>111</div>
  <div>111</div>
</div>

JavaScript

$('.slider').slick({
  slidesToShow: 1,
  slidesToScroll: 1,
  dots: false,
  autoplay: false,
  autoplaySpeed: 2000
});

function SlideNext() {
	var a = [1000,3000,2000,5000,4000,6000];
  var counter = 0;
  var myFunction = function(){
      clearInterval(interval);
      counter += 1;
      if (counter == 6) {counter = 0;}
      interval = setInterval(myFunction, a[counter]);
      $('.slider').slick('slickNext');
  }
  var interval = setInterval(myFunction, a[counter]);
  
}

SlideNext();