JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.css">
<script src="https://cdn.jsdelivr.net/blazy/latest/blazy.min.js"></script>
<div class="slider">
  <!-- First slider -->
  <div>
    <div class="home-hero b-lazy" data-src="https://sites.google.com/site/shimogyoalpine/_/rsrc/1468887694261/home/IMG_0798.JPG?height=399&width=600"></div>
  </div>
  <!-- First slider -->
  
  <!-- Second slider -->
  <div>
    <div class="home-hero b-lazy" data-src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/83/Tateshinayama-fuyu.JPG/1200px-Tateshinayama-fuyu.JPG"></div>
  </div>
  <!-- Second slider -->
  
  <!-- Third slider -->
  <div>
    <div class="home-hero b-lazy" data-src="http://www.t-alpine.com/wordpress/wp-content/uploads/home_sub.jpg"></div>
  </div>
  <!-- Third slider -->
</div>

CSS

.home-hero {
  background-size: cover;
  height: 600px;
}

JavaScript

$(document).ready(function(){
  $('.slider').slick({
    dots: true,
    arrows: true,
    infinite: false
  });
  
  var bLazy = new Blazy();
  
  $('.slider').on('afterChange', function(event, slick, direction){
	  bLazy.revalidate();
	  // left
	});
});