Owl-具有数据属性的传送带无法加载

Question

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

正如您在我的示例中看到的那样，在幻灯片 1 和 3 中，每个项目都有属性。正在工作的唯一事件是触发器，但不在幻灯片 1（第一张幻灯片）的加载上工作。

提前致谢。

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

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

});

var owl = $('.owl-carousel');
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);
  } else {
    $(".heroes-wrap").css("background-color", "white");
  }

});

body {
  font-family: Arial, Helvetica, sans-serif;
}

.heroes-wrap {
  margin: 2em;
  padding: 1em;
}

<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">
      <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>

Answer 1

有一个事件 initialized.owl.carousel，将在传送带初始化时触发。请注意，initialize.owl.carousel 和 initialized.owl.carousel 事件必须在 Owl 轮播初始化之前附加。

使用这些事件在初始加载时更改颜色，检查更新后的 fiddle。

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);
    } else {
        $(".heroes-wrap").css("background-color", "white");
    }
});

$('.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');

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

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

<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">
      <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>

Owl-具有数据属性的传送带无法加载

Owl-Carousel with Data Attribute not working on load

jquery

owl-carousel