I have implemented an image gallery using Bxslider, but I am facing an issue with the loading time as there are more than 15 images in each slide. To address this problem, I want to load images one by one when a particular slide appears. I came across an example on how to achieve this using LazyLoad and Bxslider from here, however, I am having trouble getting it to work for me. Can anyone provide assistance?
This is the code I am currently using:
$(document).ready(function(){
$("#moreLessons").bxSlider( {
startingSlide:1,
pager: false
});
// trigger lazy to load new in-slided images
$("a.bx-prev, a.bx-next").bind("click", function() {
// extra call for lazy loading
setTimeout(function() { $(window).trigger("scroll"); }, 100);
});
});