jquery - Owl-Carousel with Data Attribute not working

Question

I need help on data attribute for Owl-Carousel.

As you can see on my sample, on slide 1 and 3 there is VALUE attribute on each item. But on Slide 2 the VALUE is empty.

My objective is to set colour background base on value in attribute and I put up addClass "active" condition if the value is available. I need help to removeClass "active" if there is no value in attribute.

Thank you in advance.

Sample in 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>

标签： jqueryowl-carousel

Answer 1

1st check setBgClr attribute value is empty or not on changed slide so Replace your code to this line of code from below code.

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