JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.js"></script>
<div class="slider">
  <div><img src="https://picsum.photos/600/300?random=1"></div>
  <div><img src="https://picsum.photos/600/300?random=2"></div>
  <div><img src="https://picsum.photos/600/300?random=3"></div>
  <div><img src="https://picsum.photos/600/300?random=4"></div>
  <div><img src="https://picsum.photos/600/300?random=5"></div>
</div>

CSS

* {
  margin: 10px auto;
}

JavaScript

$('.slider').slick({
  infinite: true,
  dots: true,
  speed: 600,
  autoplay:true,
})