JSFiddle - React, Tailwind, and code Playground

by DannyEnglander

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick-theme.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script>
	(function(){
		window.lazySizesConfig = window.lazySizesConfig || {};
		window.lazySizesConfig.loadMode = 1;
		window.lazySizesConfig.expand = 10;
		window.lazySizesConfig.expFactor = 1.5;
	})();
</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/lazysizes/4.0.4/plugins/unveilhooks/ls.unveilhooks.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lazysizes/4.0.4/lazysizes.min.js" async=""></script>

<div class="content-slider" id="mySlider">
  <div class="item">
    <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="https://images.pexels.com/photos/248771/pexels-photo-248771.jpeg" alt="" class="img-responsive lazyload" />
  </div>
  <div class="item">
    <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="https://images.pexels.com/photos/440731/pexels-photo-440731.jpeg" alt="" class="img-responsive lazyload" />
  </div>
  <div class="item">
    <iframe width="640" height="350" data-src="https://www.youtube.com/embed/tgbNymZ7vqY" class="lazyload">
</iframe>
  </div>
  <div class="item">
  <div class="background lazyload" data-bg="https://images.pexels.com/photos/531880/pexels-photo-531880.jpeg">
  <h1>Test</h1>
  </div>
  </div>
</div>

CSS

.content-slider .item {
  text-align: center;
}

.content-slider img {
  max-height: 350px;
  margin: 0 auto;
}

.background {
  display: block;
    width: 640px;
    height: 350px;
    margin: 0 auto;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

.background h1 {
  padding: 100px 0;
  font-weight:bold;
}

JavaScript

$( '#mySlider' ).slick({
  dots: true,
  arrows: true,
  infinite: true,
  speed: 800,
  autoplay: true
 });