Community guidelines

Please keep discussions civil and on-topic. Repeated violations may lead to a temporary ban.

Plugins

How to add lazyloading to Owl Carousel plugin?

Solved by 01K View solution

Started by 01K 6 years ago · 1 replies · 1389 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
Yetisearch multilanguage setup Plugins · by Rene, 1 week ago	2	54	1 week ago
Adding own templates from a plugin Plugins · by Xavier, 4 weeks ago	2	61	4 weeks ago
Grav & ActivityPub Plugins · by Luka Prinčič, 7 years ago	3	1188	1 month ago
I tried to build an ActivityPub plugin for Grav, looking for honest feedback Plugins · by Sebastian van de Meer, 1 month ago	1	54	1 month ago
Trouble shooting: PHP Parse error: syntax error, unexpected string content "toggl" Plugins · by PIERROT Alain, 2 months ago	3	79	2 months ago