Is there a way to add lazy loading to a semi custom owl carousel that uses background images instead of regular img tags? I've tried using Owl carousel's function for lazy loading but it doesn't seem to work. How can I achieve this?
This is how my slider looks like:
// content articles
$slider = "SELECT * FROM `web_content` WHERE catid = 10 AND state = 1 AND featured = 1 ORDER BY ordering";
$slidercon = $conn->query($slider);
$slidercr = array();
while ($slidercr[] = $slidercon->fetch_array());
?>
<!-- Home - Slider -->
<!-- ++++++++++++++++++++++++++++++++++++++++ -->
<!-- The rest of the code -->
And here is my carousel code snippet:
$(document).ready(function() {
var old = '';
function setOld(){
setTimeout(function(){
old = $(".center").find('.item').data("src");
$(old).fadeIn('1000');
},50)
}
// Carousel initialization and settings
I am considering using either this plugin or Owl carousel's built-in lazy loading function (found here). Which option would be more suitable in this case? Simply adding lazyLoad: true, does not seem to work as expected.