JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css">
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
<div class="pic">
  <img src="https://picsum.photos/id/137/1000/300" alt="">
  <img src="https://picsum.photos/id/136/1000/300" alt="">
  <img src="https://picsum.photos/id/135/1000/300" alt="">
  <img src="https://picsum.photos/id/134/1000/300" alt="">
  <img src="https://picsum.photos/id/133/1000/300" alt="">
</div>

JavaScript

$('.pic').slick({
  dots: true,
  autoplay: true,
  autoplaySpeed: 2000,
  adaptiveHeight: true
});