JSFiddle - React, Tailwind, and code Playground

by zeropsi

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<section id="carousel">
  <div id="billboards">
    <div class="billboard active" data-billboard="0" data-image="https://images3.alphacoders.com/853/thumb-1920-85305.jpg" style="background-image: url('https://images3.alphacoders.com/853/thumb-1920-85305.jpg');">
      <div class="container">
        <div class="headline">
          <h1><a href="#" title="Duis lacinia massa ac leo finibus finibus">Duis lacinia massa ac leo finibus finibus</a></h1>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vestibulum sit amet risus at posuere. Nullam nec lacinia ipsum, mollis rutrum dui. Vestibulum vestibulum ultricies ipsum eu tempus. Ut ultrices augue ut libero lacinia, non malesuada augue malesuada.</p>
        </div>
      </div>
    </div>
    <!-- /.billboard -->

    <div class="billboard" data-billboard="1" data-image="https://static.pexels.com/photos/257360/pexels-photo-257360.jpeg" style="background-image: url('https://static.pexels.com/photos/257360/pexels-photo-257360.jpeg');">
      <div class="container">
        <div class="headline">
          <h1><a href="#" title="Donec placerat facilisis mi, eget gravida felis interdum vel">Donec placerat facilisis mi, eget gravida felis interdum vel</a></h1>
          <p>Fusce dictum lorem non turpis mollis accumsan. Vivamus imperdiet nulla varius nunc tempor congue. Etiam nec bibendum urna. Integer ultrices volutpat dignissim. Donec pharetra convallis magna.</p>
        </div>
      </div>
    </div>
    <!-- /.billboard -->

  </div>
  <!-- /#billboards -->


  <ol class="carousel-indicators">
    <li data-slide="0" class="active"></li>
    <li data-slide="1"></li>
  </ol>

</section>

CSS

section#carousel {
	position: relative;
	overflow: hidden;
}
div#billboards {
	width: 100%;
	height: 500px;
	position: relative;
	overflow: hidden;
	background: #000000;
}
.billboard {
	perspective: 1000px;
    perspective-origin: 50% 50%;
    position: relative;
	width: 100%;
	height: 500px;
	background-size: cover;
    background-position: 50% 50%;
	/*animation: animatedBackground 20s linear;*/
	display: none;
}
.billboard.active {
	display: inline-block;
}
.billboard:before {
    content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-image: linear-gradient(rgba(0,0,0,0),rgba(0,0,0,1));
	opacity: .52; 
}
.billboard a {
	color: #fff;
	text-decoration: none;
}
.headline {
	position: absolute;
	bottom: 0;
	padding: 80px 0;
	color: #fff;
	text-shadow: 0 2px 2px rgba(0, 0, 0, 0.5);
	width: 80%;
}

JavaScript

$(document).ready(function() {
  $(document).on("click", ".carousel-indicators li", function() {
    $(".carousel-indicators li").removeClass("active");
    var a = $(this).data("slide");
    $(this).addClass("active");
    $("div#billboards").animate({
      "left": (a * -100) + "%"
    });
    $(".billboard").removeClass("active");
    $(".billboard[data-billboard='" + a + "']").addClass("active");
    return false;
  });

  $(window).on("resize", function() {
    BillboardCarousel.init();
  });

  if ($("section#carousel").length === 1) {
    BillboardCarousel.init();
  }

});

var BillboardCarousel = {
  init: function() {
    BillboardCarousel.resize();
  },
  imagesLoaded: function() {
    var imagesLoaded = 0;
    $(".billboard").each(function() {
      var image = new Image();
      image.src = $(this).data("image");
      image.onload = function() {
        imagesLoaded++;
        if (imagesLoaded === $(".billboard").length) {
          BillboardCarousel.startCarousel();
        }
      };
    });
  },
  startCarousel: function() {
    var interval = parseInt($("div#billboards").data('interval'));
    window.setInterval(function() {
      BillboardCarousel.timer();
    }, 10000);
  },
  resize: function() {
    var a = $(".billboard").length;
    var b = $(window).width();
    $(".billboard").css({
      "width": b + "px",
      "float": "left",
      "display": "inline-block"
    });
    $("div#billboards").css({
      "width": a * 100 + "%",
      "left": "0%"
    });
    $("div#billboards").attr("data-interval", 10000);
    BillboardCarousel.imagesLoaded();
  },
  timer: function() {
    var a = $(".billboard.active").data("billboard");
    a++;
    if (a >= $(".billboard").length) {
      a = 0;
    }
    $(".billboard").removeClass("active");
    $(".carousel-indicators li").removeClass("active");
    $(".billboard[data-billboard='" + a + "']").addClass("active");
    $(".carousel-indicators li[data-slide='" + a + "']").addClass("active");
   ...