在 OWL 轮播当前项目上添加 class

Question

我正在使用 OWL 轮播，尝试在每次滑动时将 class 添加到当前项目 <div class="item">。

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>

已尝试（无效）：

$(document).ready(function() {

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

});

如何在每次滑动时添加class当前项？

Answer 1

你可以试试：

$(document).ready(function () {

   var carousel = $("#owl-demo");

   carousel.owlCarousel({
   items : 4,
   lazyLoad : true,
   navigation : true,
   afterAction: function(el){
   //remove class active
   this
   .$owlItems
   .removeClass('active')

   //add class active
   this
   .$owlItems //owl internal $ object containing items
   .eq(this.currentItem + 1)
   .addClass('active')    
    } 
    });
});

在 OWL 轮播当前项目上添加 class

Add class on OWL Carousel current item

javascript

jquery

html

owl-carousel