Сова-карусель с атрибутом данных не работает - PullRequest
Новая
       8

Сова-карусель с атрибутом данных не работает

0 голосов
/ 04 февраля 2020

Мне нужна помощь по атрибуту данных для Owl-Carousel.

Как вы можете видеть на моем примере, на слайде 1 и 3 есть атрибут VALUE для каждого элемента. Но на слайде 2 ЗНАЧЕНИЕ пусто.

Моя цель - установить цветовой фон на основе значения в атрибуте, и я добавлю условие addClass "active", если значение доступно. Мне нужна помощь по удалению класса "active", если в атрибуте нет значения.

Заранее спасибо.

Образец в 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>

1 Ответ

1 голос
/ 04 февраля 2020

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