OWL-带有数据属性的轮播不工作

Question

我需要帮助数据属性的猫头鹰-旋转木马。

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

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

提前谢谢你。

代码本中的示例https://Codepen.io/jafaris-mustafa/pen/xwjwjaz

null

  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;}

<link href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.theme.default.min.css" rel="stylesheet" />
<link href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet" />

<div class="heroes-wrap">
  <div class="owl-carousel owlCarousel-item">
    <div class="item" setBgClr="red">
      <div class="heroes-txt">
        <h2>Slide 1</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        </p>
      </div>
    </div>
    <div class="item" setBgClr="">
      <div class="heroes-txt">
        <h2>Slide 2</h2>
        <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </div>
    </div>
    <div class="item" setBgClr="#4CAF50">
      <div class="heroes-txt">
        <h2>Slide 3</h2>
        <p>Orci nulla pellentesque dignissim enim. Nunc non blandit massa enim. At quis risus sed vulputate odio ut. Vulputate odio ut enim blandit volutpat maecenas. Massa id neque aliquam vestibulum morbi blandit.</p>
      </div>
    </div>
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/owl.carousel.js"></script>

null

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");
   }
});