Owl Carousel 2 找到中心项目答案

【问题标题】：Owl Carousel 2 find center itemOwl Carousel 2 找到中心项目
【发布时间】：2019-12-18 20:59:03
【问题描述】：

我想在 owl carousel 2 (in native) 中找到 center 项目，而不是由 class 选择，如 $('.owl-item.center') 我想通过 owl carousel 原生函数和结果找到它，现在我可以获取事件，并且有一堆结果，我可以得到任何与center相关的值

$('.owl-carousel').owlCarousel({
  center: true,
  items: 3,
  loop: false,
  margin: 10,
});

$('.owl-carousel').on("dragged.owl.carousel", function(e) {
  console.log(e);
  if (e.itemClass === 'center') {
    alert('it is center one!');
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" integrity="sha256-UhQQ4fxEeABh4JrcmAJ1+16id/1dnlOEVCFOxDef9Lw=" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js" integrity="sha256-pTxD+DSzIwmwhOqTFN+DB+nHjO4iAsbgfyFq5K5bcE0=" crossorigin="anonymous"></script>

<div class="owl-carousel">
  <div class="item">
    <h4>1</h4>
  </div>
  <div class="item">
    <h4>2</h4>
  </div>
  <div class="item">
    <h4>3</h4>
  </div>
  <div class="item">
    <h4>4</h4>
  </div>
  <div class="item">
    <h4>5</h4>
  </div>
  <div class="item">
    <h4>6</h4>
  </div>
</div>

如何在原生中检测 owl carousel 2 center item？再次，我不想找到 jquery find items by center class with find each 或任何其他选择器，我想猫头鹰给我。

【问题讨论】：

标签： javascript jquery owl-carousel owl-carousel-2

【解决方案1】：

我不认为 owl carousel 提供这样的选项来获取事件结果中的中心项目。你可以像这样有点棘手，只需获取 e.item.index 它是当前活动项目，然后 +1 获取居中项目。检查以下示例：

$('.owl-carousel').owlCarousel({
  center: true,
  items: 3,
  loop: false,
  margin: 10,
});

$('.owl-carousel').on("dragged.owl.carousel", function(e) {
  console.log('center item is:'+ (e.item.index + 1));
});

.item {
  border: 1px solid;
  text-align: center;
}

.owl-item.active.center {
  background: gray;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" integrity="sha256-UhQQ4fxEeABh4JrcmAJ1+16id/1dnlOEVCFOxDef9Lw=" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js" integrity="sha256-pTxD+DSzIwmwhOqTFN+DB+nHjO4iAsbgfyFq5K5bcE0=" crossorigin="anonymous"></script>

<div class="owl-carousel">
  <div class="item">
    <h4>1</h4>
  </div>
  <div class="item">
    <h4>2</h4>
  </div>
  <div class="item">
    <h4>3</h4>
  </div>
  <div class="item">
    <h4>4</h4>
  </div>
  <div class="item">
    <h4>5</h4>
  </div>
  <div class="item">
    <h4>6</h4>
  </div>
</div>

【讨论】：