JSFiddle - React, Tailwind, and code Playground

by yoyosan

HTML

<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>



<!-- Add the slick-theme.css if you want default styling -->
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
<!-- Add the slick-theme.css if you want default styling -->
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/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>

CSS

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

JavaScript

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