根据用户在轮播中的位置查找猫头鹰轮播的索引

Posted 2023-05-07

【中文标题】根据用户在轮播中的位置查找猫头鹰轮播的索引

【英文标题】：Finding the index of a owl carousel depending on where the user is at on the carousel

【发布时间】：2022-01-11 17:06:38

【问题描述】：

如上所述，有没有办法获取轮播的索引？

我想根据用户所在的位置（蓝色箭头）更改文本（用红色箭头表示）。我

【问题讨论】：

这能回答你的问题吗？ Owl Carousel 2 - how to get a current item?

【参考方案1】：

您可以按照document 使用轮播事件。请尝试以下代码。

var owl;
$(document).ready(function()
  owl = $(".owl-carousel").owlCarousel(
    autoplay: false,
    autoplaySpeed: 300,
    loop: false,
    navSpeed: 300,
    items: 1,
    margin: 2
  );
  owl.on('changed.owl.carousel', function(e) 
    $('#continue-btn').html('Continue ' + e.item.index);
  );
);

body 
  margin: 0;
  padding: 0;


.owl-carousel .item 
  height: 120px;
  background: #4DC7A0;
  padding: 1rem;
  list-style: none;
  margin: 10px;
  text-align: center;
  color: white;
  font-size: 20px;
  line-height: 120px;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.1.6/assets/owl.carousel.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.1.6/assets/owl.theme.default.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.1.6/owl.carousel.min.js"></script>

<div class="owl-carousel">
  <div class="item"> slide1 </div>
  <div class="item"> slide2 </div>
  <div class="item"> slide3 </div>
  <div class="item"> slide4 </div>
  <div class="item"> slide5 </div>
  <div class="item"> slide6 </div>
  <div class="item"> slide7 </div>
  <div class="item"> slide8 </div>
  <div class="item"> slide9 </div>
</div>
<button id="continue-btn">
Continue
</button>