具有数据属性的猫头鹰轮播不起作用答案

【问题标题】：Owl-Carousel with Data Attribute not working具有数据属性的猫头鹰轮播不起作用
【发布时间】：2020-05-20 00:43:21
【问题描述】：

我需要有关 Owl-Carousel 数据属性的帮助。

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

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

提前谢谢你。

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

  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>

【问题讨论】：

这是否意味着您要跳过没有 setBgClr 值的项目？
不，setBgClr 是通过 CMS 设置的，是否具有属性颜色是可选的。

标签： jquery owl-carousel

【解决方案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");
   }
});

【讨论】：