Owl Carousel 2 - 获取活动物品答案

【问题标题】：Owl Carousel 2 - Getting Active ItemsOwl Carousel 2 - 获取活动物品
【发布时间】：2022-01-31 21:21:24
【问题描述】：

我有一个由 WordPress 主题生成的 Owl Carousel 2，并且我设置了一些与此类似的自定义脚本：

owl.on('changed.owl.carousel', function() {

    activeEls = $('.owl-item.active');

    setCarouselCaption( activeEls[1] ); 

});

这会将轮播下方中间图片的图片标题放置在一个全宽容器中。

我遇到的问题是，当我将 active 项目分配给 activeEls 时，它会在点击之前而不是之后抓取活动项目。

有没有办法等待让 Owl Carousel 更新 active 项目，然后将它们分配给 activeEls？

或者 - 有什么方法可以检测是否点击了Previous 或Next 按钮？目前，我只能检测到一个变化，但不能检测到哪个变化。

【问题讨论】：

标签： javascript jquery owl-carousel

【解决方案1】：

.setTimeout() 短至 1 毫秒就可以解决问题。

$(document).ready(function(){
  var owl = $('.owl-carousel').owlCarousel({
    loop:true,
    margin:10,
    nav:true,
    items:3
  });
  
  owl.on('changed.owl.carousel', function(event) {
    setTimeout(function(){
      var activeEls = $('.owl-item.active').eq(1); // .eq(1) to get the "middle image out of 3 actives"
      setCarouselCaption( activeEls ); 
    },1);
  });

  function setCarouselCaption(el){
    $(".owl-item").removeClass("target");
    el.addClass("target");
  }

});  // Ready

.target{
  border-bottom:1px solid red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.css" rel="stylesheet"/>

<div class="owl-carousel owl-theme">
  <div class="item"><h4><img src="http://via.placeholder.com/350x150/?text=image+1"></h4></div>
  <div class="item"><h4><img src="http://via.placeholder.com/350x150/?text=image+2"></h4></div>
  <div class="item"><h4><img src="http://via.placeholder.com/350x150/?text=image+3"></h4></div>
  <div class="item"><h4><img src="http://via.placeholder.com/350x150/?text=image+4"></h4></div>
  <div class="item"><h4><img src="http://via.placeholder.com/350x150/?text=image+5"></h4></div>
  <div class="item"><h4><img src="http://via.placeholder.com/350x150/?text=image+6"></h4></div>
  <div class="item"><h4><img src="http://via.placeholder.com/350x150/?text=image+7"></h4></div>
  <div class="item"><h4><img src="http://via.placeholder.com/350x150/?text=image+8"></h4></div>
  <div class="item"><h4><img src="http://via.placeholder.com/350x150/?text=image+9"></h4></div>
  <div class="item"><h4><img src="http://via.placeholder.com/350x150/?text=image+10"></h4></div>
  <div class="item"><h4><img src="http://via.placeholder.com/350x150/?text=image+11"></h4></div>
  <div class="item"><h4><img src="http://via.placeholder.com/350x150/?text=image+12"></h4></div>
</div>

【讨论】：

完美运行。非常感谢！

【解决方案2】：

另一个建议，不使用 setTimeout：

owl.on('changed.owl.carousel', function(event) {
  let activeElement = $('.owl-carousel .owl-item.active');
  if ($(activeElement).next().length > 0) {
    console.log($(activeElement).next());
  }
});

【讨论】：