Plugins

How to add lazyloading to Owl Carousel plugin?

Started by 01K 6 years ago · 1 replies · 1550 views

6 years ago

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

lazyLoad

TXT

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:

HTML

[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?

last edited 09/03/20 by pamtbaau

6 years ago Solution

It seems that this code works well:

HTML

[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]

Suggested topics

Topic	Replies	Views	Activity
Clearing of the page content while editing in admin plugin in the Grav 2.0 Plugins · by Vladimir Novak, 2 weeks ago	3	291	2 weeks ago
Storing Flex-Objects at the page level Plugins · by Mathieu Lecouturier, 3 weeks ago	3	277	3 weeks ago
Plugin: Clockwork Web not working, 404 on /clockwork Plugins · by Slebeig, 2 months ago	1	403	2 months ago
Yetisearch multilanguage setup Plugins · by Rene, 2 months ago	2	574	2 months ago
Adding own templates from a plugin Plugins · by Xavier, 3 months ago	2	490	3 months ago