JSFiddle - React, Tailwind, and code Playground

by keith9090

HTML

<link rel="stylesheet" href="http://kenwheeler.github.io/slick/slick/slick.css">
<script src="http://kenwheeler.github.io/slick/slick/slick.js"></script>
<div id="slider">
	<article>
		<div class="sliderImageBox">
			<div class="sliderImage">
				<img data-lazy="http://placekitten.com/200/300" alt="" />
			</div>
		</div>
	</article>
	<article>
		<div class="sliderImageBox">
			<div class="sliderImage">
				<img data-lazy="http://placeimg.com/640/480/any" alt="" />
			</div>
		</div>
	</article>
	<article>
		<div class="sliderImageBox">
			<div class="sliderImage">
				<img data-lazy="http://placekitten.com/200/400" alt="" />
			</div>
		</div>
	</article>
	<article>
		<div class="sliderImageBox">
			<div class="sliderImage">
				<img data-lazy="http://placekitten.com/400/400" alt="" />
			</div>
		</div>
	</article>
</div>

CSS

#slider {
	top: 85px;
	left: 5%;
	width: 90%;
	height: 500px;
}
.slick-list {
	width: 100%;
	height: 100%;
}
.slick-track {
	height: 100%;
}
.slick-slide img {
	display: inline;
}
#slider article {
	width: 100%;
	height: 100%;
}
.sliderImageBox {
	position: absolute;
	width: 100%;
	height: 100%;
	background-position: center;
	background-repeat: no-repeat;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	display: table;
}
.sliderImage {
	display: table-cell;
	vertical-align: middle;
	text-align: center;
}
.sliderHidden {
	position: relative;
	width: 100%;
	height: 100%;
	display: none;
}
.sliderTextBox {
	width: 80%;
	height: 100%;
	display: table;
	margin: 0 auto;
}
.sliderText {
	display: table-cell;
	vertical-align: middle;
	text-align: center;
}

JavaScript

$("#slider").slick({
  slide: 'article',
  arrows: false,
  lazyLoad: 'ondemand',
  speed: 300
}).click(function() {
  //setTimeout(function() {
    $("#slider").slickNext();
  //}, 310);
});