JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.6.3/flexslider.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.6.3/jquery.flexslider.js"></script>
<div id="slider">
<ul class="slides" style="width: 600%; transition-duration: 0s; transform: translate3d(0px, 0px, 0px);">
<li class="flex-active-slide" style="width: 555px; float: left; display: block;"><div class="large-image"><img alt="#" class="lazy" src="http://sale.coupsoft.com/uploads/717189/Australia.png" data-src="http://sale.coupsoft.com/uploads/717189/Australia.png" draggable="false"></div></li><li style="width: 555px; float: left; display: block;"><div class="large-image"><img alt="#" class="lazy" src="http://sale.coupsoft.com/uploads/717189/airplane.jpg" data-src="http://sale.coupsoft.com/uploads/717189/airplane.jpg" draggable="false"></div></li><li style="width: 555px; float: left; display: block;"><div class="large-image"><img alt="#" class="lazy" src="http://sale.coupsoft.com/uploads/717189/America.jpg" data-src="http://sale.coupsoft.com/uploads/717189/America.jpg" draggable="false"></div></li> </ul>
</div>
JavaScript
$(function(){
$("#slider").flexslider({
animation: "slide",
controlNav: false,
directionNav: false,
init: function (slider) {
// lazy load
$("img.lazy").slice(0,1).each(function () {
alert('init running');
var src = $(this).attr("data-src");
$(this).attr("src", src).removeAttr("data-src").removeClass("lazy");
});
},
before: function (slider) {
// lazy load
$("img.lazy").slice(0,2).each(function () {
alert('before running');
var src = $(this).attr("data-src");
$(this).attr("src", src).removeAttr("data-src").removeClass("lazy");
});
},
animationLoop: false,
slideshow: false,
sync: "#carousel",
});
})