How to add lazyloading to Owl Carousel plugin?

Support Plugins
1

The carousel work OK, but I want to add a lazyLoad feature.
In docs it’s described as
### lazyLoad

Type: **Boolean** Default: `false`

Lazy load images. data-src and data-src-retina for highres. Also load images into background inline style if element is not.

I full markup looks like:

[owl-carousel items=1 margin=10 loop=true autoplay=true autoplayHoverPause=true nav=true animateOut=slideOutDown animateIn=fadeIn lazyLoad=true]

<div class="single-hs-item" style="background: url({{ page.media['01_image.jpg'].url }});height: 100vh; width: 100%; background-size: cover; background-position: center center;background-repeat: no-repeat;">
  <div class="d-table">
    <div class="d-tablecell">
      <div class="hero-text">
      <h1>Text</h1>
      <p>Text</p>
      <div class="slider-btn">
        <a href="#" class="custom-btn1"></a>
      </div>
      </div>
    </div>
  </div>
</div>

[/owl-carousel]

But it doesn’t work. What I’m missing?

2

It seems that this code works well:

[owl-carousel items=1 margin=10 loop=true autoplay=true autoplayHoverPause=true nav=true animateOut=slideOutDown animateIn=fadeIn lazyLoad=true]
<div class="single-hs-item owl-lazy" data-src="{{ page.media['image01.jpg'].url }}">
  <div class="d-table">
    <div class="d-tablecell">
      <div class="hero-text">
      <h1>Text</h1>
      <p>Text</p>
      <div class="slider-btn">
        <a href="#services" class="custom-btn1">Button</a>
      </div>
      </div>
    </div>
  </div>
</div>

[/owl-carousel]
1 Like