CODEWITHSUNDEEP
javascriptowl-carousel
nup
nup

Reputation: 368

Lazy loading does not work if the image is inside a block

I am doing lazy loading in owl. If I place the image in the "owl-item" block, the "owl-loading" class is not replaced with "owl-loaded" in the main container "owl-carousel", as a result of which the slide content is not displayed. If I place the images without the "owl-item", then everything goes fine. Here is my code:

<div class = "owl-carousel">
    <div class="owl-item">
        <img class="owl-lazy" data-src="image_link"/>
    </div>
    <div class="owl-item">
        <img class="owl-lazy" data-src="image_link"/>
    </div>
    <div class="owl-item">
        <img class="owl-lazy" data-src="image_link"/>
    </div>
</div>

jQuery('.owl-carousel').owlCarousel({
    items: 1,
    lazyLoad: true,
    loop: true
});

I have to put the image in a block because there will be other markup in addition to the image.

Upvotes: 1

Views: 2300

Answers (2)

nup
nup

Reputation: 368

If I remove the class owl-item from the markup, then everything starts working correctly.

<div class="owl-carousel">
    <div class="owl-item">
        <img class="owl-lazy" data-src="image_link"/>
    </div>
    ...
</div>

Upvotes: 1

Jorel Amthor
Jorel Amthor

Reputation: 1294

Is your JS executed inside a ready event ? Also try the class lazyOwl instead of owl-lazy

$(document).ready(function() {
 
  $(".owl-carousel").owlCarousel({
    items : 4,
    lazyLoad : true,
    navigation : true
  }); 
 
});

Upvotes: 1

Related Questions