JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-migrate/3.0.1/jquery-migrate.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
<link rel="stylesheet" href="cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css">
<div class="slider">
  <img src="https://source.unsplash.com/NodtnCsLdTE/900x400" alt=" ">
  <img src="https://source.unsplash.com/_STvosrG-pw/900x400" alt=" ">
  <img src="https://source.unsplash.com/tzzpfLiRPlA/900x400" alt=" ">
</div>

CSS

.slider {
  position: relative;
  border-radius: 50%;
  overflow: hidden;
  border: 2px red solid;
}

.slick-dots {
  list-style: none;
  padding: 0;
  margin: 0;
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
}

.slick-dots li {
  display: inline-block;
}

JavaScript

$('.slider').slick({
  dots: true,
  arrows: false,
  adaptiveHeight: true,
  infinite: true,
  speed: 300,
  slidesToShow: 1,
});