JSFiddle - React, Tailwind, and code Playground

by Himanshu Joshi

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<link rel="stylesheet" href="//cdn.jsdelivr.net/jquery.slick/1.4.0/slick.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//cdn.jsdelivr.net/jquery.slick/1.4.0/slick.min.js"></script>
<div class="container">
    <div class="slider">
    <div><img data-lazy="http://lorempixel.com/1000/1000/people" width="400" height="400" /></div>
    <div><img data-lazy="http://lorempixel.com/1000/1000/cats" width="400" height="400" /></div>
    <div><img data-lazy="http://lorempixel.com/1000/1000/food" width="400" height="400" /></div>
    <div><img data-lazy="http://lorempixel.com/1000/1000/business" width="400" height="400" /></div>
    <div><img data-lazy="http://lorempixel.com/1000/1000/technics" width="400" height="400" /></div>
</div>
</div>

CSS

body { background: #ccc; margin: 100px; }
.slick-slider { width: 400px; }
.slick img { margin: auto; }

/* Default code - not working */
/*
.slick-loading .slick-list { background: #fff url('http://www.ajaxload.info/images/exemples/30.gif') center center no-repeat; }
*/

/* This kinda works */
img.slick-loading { background: #fff url('http://www.ajaxload.info/images/exemples/30.gif') center center no-repeat; }

JavaScript

$(document).ready(function(){
	$('.slider').slick({
		arrows: true,
		dots: false,
		infinite: true,
		speed: 1000,
		lazyLoad: 'ondemand',
		adaptiveHeight: true,
		slidesToShow: 1,
		slidesToScroll: 1,
	});
});