JSFiddle - React, Tailwind, and code Playground

by joshmoto

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="" />
  </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%;
    
  }
  
  .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: 20px;
      height: 20px;
      margin: 0 5px;
      padding: 0;
      cursor: pointer;
      
      BUTTON {
        font-size: 0;
        line-height: 0;
        display: block;
        width: 16px;
        height: 16px;
        padding: 5px;
        cursor: pointer;
        color: transparent;
        border: 0;
        outline: none;
        background: transparent;
        border-radius: 50%;
        background: rgb(#1d1d1b,.4);
        
        &:hover {
          background: rgb(#1d1d1b,.4);
          transition: background .25s ease-in-out;
         
        }
      }
      
      &.slick-active {
        
        BUTTON:before {
          background: #cd162c;
          opacity: 1;
        }
      }
    }
  }
}

JavaScript

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