CODEWITHSUNDEEP
owl-carouselowl-carousel-2
metior
metior

Reputation: 385

Owl Carousel 2 - Inline background images not working

I just downloaded Owl Carousel 2 to create a carousel with inline background images. I thoroughly read the documentation available at: http://www.owlcarousel.owlgraphic.com/demos/lazyLoad.html

It says:

LazyLoad HTML strucutre requires class="owl-lazy" and data-src="url_to_img" or/and data-src-retina="url_to_highres_img". If you set above settings not on but on other DOM element then Owl will load an image into css inline background style.

Here is my JS initialization:

$('.owl-carousel').owlCarousel({
    lazyLoad: true,
    margin: 20,
    loop: false,
    nav: false,
    items: 3,
});

My HTML code:

<div class="owl-lazy" data-src="images/carousel/default/default04.png" data-src-retina="images/carousel/default/default04.png" alt=""></div>

But its not loading that image that was injected into the div. I have searched it on google but all in vein. Its not working now, may be an update failure or something. Or may be I am missing something?

Upvotes: 0

Views: 2026

Answers (1)

Taytorious
Taytorious

Reputation: 324

As a workaround, you could load it in an <img> tag with the following styles:

.carousel-image {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: 1;
}

Make sure your owl item container has position: relative; and the content has a z-index greater than 1.

Upvotes: 0

Related Questions