<h1>Simple image slider using autoplay and fade.</h1>
<div class="slider">
  <div class="slide">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/152229/slider-img-1.jpg" />
  </div>
  <div class="slide">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/152229/slider-img-2.jpg" />
  </div>
  <div class="slide">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/152229/slider-img-3.jpg" />
  </div>
  <div class="slide">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/152229/slider-img-1.jpg" />
  </div>
</div>

body {
  padding: 5rem;
}

h1 {
  margin: 0 0 1rem;
  font-size: 1.2rem;
}

p {
  margin: 0 0 2rem;
}

.slider {
  width: 40rem;
}

.slide {
  
  img {
    display: block;
    width: 100%;
    height: auto;
  }
  
}

// Styling the default Slick dots

.slick-dots {
  display: flex;
  justify-content: center;
  
  margin: 0;
  padding: 1rem 0;
  
  list-style-type: none;
  
    li {
      margin: 0 0.25rem;
    }
  
    button {
      display: block;
      width: 1rem;
      height: 1rem;
      padding: 0;
      
      border: none;
      border-radius: 100%;
      background-color: blue;
      
      text-indent: -9999px;
    }
  
    li.slick-active button {
      background-color: red;
    }
    li.active-dot button {
      background-color: red;
    }
  
}

$('.slider').slick({
  infinite: true,
  dots: true,
  arrows: false,
  autoplay: true,
  autoplaySpeed: 3000,
  fade: true,
  fadeSpeed: 1000
});

// On before slide change
$('.slider').on('beforeChange', function(event, slick, currentSlide, nextSlide){
  dotsHandler(nextSlide);
});

function dotsHandler(n) {
  $('.active-dot').removeClass('active-dot');
  for(let i = 0; i < n; i++ ) {
    $('.slick-dots li').eq(i).addClass('active-dot');
  }
}