JSFiddle - React, Tailwind, and code Playground

by birdie2019

HTML

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

CSS

* {
  margin: 10px auto;
  background-color: #eee;
}

JavaScript

$('.slider').slick({
    dots: true,
    autoplay: true,
});