Edit in JSFiddle

<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>
.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;
}
$('.slider').slick({
  dots: true,
  arrows: false,
  adaptiveHeight: true,
  infinite: true,
  speed: 300,
  slidesToShow: 1,
});