Question

我需要有关“猫头鹰轮播”的数据属性的帮助。

正如您在我的示例中看到的那样，幻灯片1和3在每个项目上都有VALUE属性。但是在幻灯片2上，VALUE为空。

我的目标是根据属性中的值设置颜色背景，如果该值可用，我会设置addClass“活动”条件。如果属性中没有任何值，我需要删除removeClass“活动”的帮助。

谢谢。

Codepen https://codepen.io/jafaris-mustafa/pen/XWJwjaZ中的示例

generate_for_oracle

  var owl = $('.owl-carousel');
owl.on('initialized.owl.carousel', function(property){  
  var current = property.item.index;
    var src = $(property.target).find(".owl-item").eq(current).find(".item").attr('setBgClr');
    if($(property.target).find(".owl-item").eq(current).find(".item").is('[setBgClr]')) {
        $(".heroes-wrap").css("background-color", src);
      $(".heroes-txt").addClass("active");
    } else {
        $(".heroes-wrap").css("background-color", "white");
      $(".heroes-txt").removeClass("active");
    }
});

$('.owl-carousel').owlCarousel({
  autoplay: true,
  loop: true,
  margin: 10,
  autoHeight: true,
  autoplayTimeout: 10000,
  smartSpeed: 800,
  nav: true,
  items: 1,

});



owl.on('changed.owl.carousel',function(property){
    var current = property.item.index;
    var src = $(property.target).find(".owl-item").eq(current).find(".item").attr('setBgClr');
    //console.log('Image current is ' + src);

    if($(property.target).find(".owl-item").eq(current).find(".item").is('[setBgClr]')) {
        $(".heroes-wrap").css("background-color", src);
      $(".heroes-txt").addClass("active");
    } else {
        $(".heroes-wrap").css("background-color", "white");
      $(".heroes-txt").removeClass("active");
    }
    
});

body {font-family:Arial, Helvetica, sans-serif;}
.heroes-wrap {margin:2em; padding:1em;}
.heroes-txt.active {color:white;}

Answer 1

第一次检查 setBgClr 属性值是经过更改的幻灯片上的empty或not，因此将代码从下面的代码替换为这一行代码。

owl.on('changed.owl.carousel',function(property){
  var current = property.item.index;
  var src = $(property.target).find(".owl-item").eq(current).find(".item").attr('setBgClr');
  if (src!='') {
    $(".heroes-wrap").css("background-color", src);
      $(".heroes-txt").addClass("active");
    }
  else{
      $(".heroes-wrap").css("background-color", "white");
      $(".heroes-txt").removeClass("active");
   }
});

具有数据属性的Owl-Carousel无法正常工作

1 个答案: