在LaLoLoad之后在OWL Carousel上添加类 [英] Add class on OWL Carousel afterLazyLoad

问题描述

我正在使用 OWL Carousel ，尝试添加课程 .border -red 到< div class =item> 在lazyLoad之后，意味着在lazyLoad afterLazyLoad之后调用此函数/ code>



示例： $（。item）。addClass（border-red ）; 延迟加载时。意味着在OWLCarousel lazyLoaded之后执行类函数执行。

I'm using OWL Carousel, trying to add class .border-red to <div class="item"> after lazyLoad, means call this function after lazyLoad afterLazyLoad

Example: $(".item").addClass("border-red"); when lazy loaded. Means add class function execute after OWLCarousel lazyLoaded.

JS

$(document).ready(function() {

$("#owl-demo").owlCarousel({
items : 4,
lazyLoad : true,
navigation : true
});

});

HTML

<div id="owl-demo" class="owl-carousel">
    <div class="item"><img class="lazyOwl" data-src="assets/owl1.jpg" alt="Lazy Owl Image"></div>
    <div class="item"><img class="lazyOwl" data-src="assets/owl1.jpg" alt="Lazy Owl Image"></div>
    <div class="item"><img class="lazyOwl" data-src="assets/owl2.jpg" alt="Lazy Owl Image"></div>
    <div class="item"><img class="lazyOwl" data-src="assets/owl3.jpg" alt="Lazy Owl Image"></div>
    <div class="item"><img class="lazyOwl" data-src="assets/owl5.jpg" alt="Lazy Owl Image"></div>
</div>

这是OWLCarousel 选项和回调


OWLCarousel demo >


如何在OWLCarousel lazyLoaded之后执行addclass函数？

Here is OWLCarousel Options and Callbacks
OWLCarousel demo >
How to addclass function execute after OWLCarousel lazyLoaded?

推荐答案

试试这个：

$(document).ready(function() {

   $("#owl-demo").owlCarousel({
      items : 4,
      lazyLoad : true,
      navigation : true,
      afterLazyLoad: function(elem){
          $(elem).addClass("border-red");
      }
   });

});

这里 afterLazyLoad 是一个回调函数

这篇关于在LaLoLoad之后在OWL Carousel上添加类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！