JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/[email protected]/slick/slick.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.js"></script>
<div class="container mt-3 mb-3">
  <div class="gallery">
    <img src="http://kunden.markus-kegel.de/kronenmetzgerei/d173554059a8c3b916de09c1e73e74cf.jpg" alt="" />
    <img src="http://kunden.markus-kegel.de/kronenmetzgerei/171c377ba830f6ac11d465e93f39eea6.jpg" alt="" />
    <img src="http://kunden.markus-kegel.de/kronenmetzgerei/8ac0b82a3f103b0ef65e597a8ba2547c.jpg" alt="" />
    <img src="http://kunden.markus-kegel.de/kronenmetzgerei/d173554059a8c3b916de09c1e73e74cf.jpg" alt="" />
    <img src="http://kunden.markus-kegel.de/kronenmetzgerei/171c377ba830f6ac11d465e93f39eea6.jpg" alt="" />
    <img src="http://kunden.markus-kegel.de/kronenmetzgerei/8ac0b82a3f103b0ef65e597a8ba2547c.jpg" alt="" />
  </div>
</div>

SCSS

.gallery {
  box-shadow: 20px 20px 0 0 #1d1d1b, 0 0 10px 0 rgba(29,29,27,.2);
  
  IMG {
    display: block;
    width: 100%;
    cursor: grab;
    
  }
  
  .slick-dots {
    position: absolute;
    bottom: -58px;
    display: block;
    width: 100%;
    padding: 0;
    margin: 0;
    list-style: none;
    text-align: center;
    
    LI {
      position: relative;
      display: inline-block;
      width: 16px;
      height: 16px;
      margin: 0 6px;
      padding: 0;
      cursor: pointer;
      
      BUTTON {
        font-size: 0;
        line-height: 0;
        display: block;
        width: 16px;
        height: 16px;
        cursor: pointer;
        color: transparent;
        border: 0;
        outline: none;
        background: transparent;
        
        &:hover:before {
          opacity: 1;
        }
        
        &:before {
          content: '';
          display: block;
          width: 16px;
          height: 16px;
          opacity: .4;
          transition: opacity .25s ease-in-out;
          background: #1d1d1b;
          border-radius: 50%;
        }
      }
      
      &.slick-active {
        
        BUTTON:before {
          opacity: 1;
          background: #cd162c;
        }
      }
    }
  }
}

JavaScript

$('.gallery').slick({
  dots: true,
  autoplay: true,
  accessibility: true,
  autoplaySpeed: 4000,
  infinite: true,
  prevArrow: "<div class='slick-prev'>",
  nextArrow: "<div class='slick-next'>"
});