如何获取 OwlCarousel2 中上一项和下一项的索引？

Question

如何获取OwlCarousel 中下一个和上一个项目的索引，以便为下一个和上一个按钮设置背景图像？我制作了旋转木马的基本变体。

$('.cat-slides').owlCarousel({
    items: 1,
    center: true,
    loop: true,
    autoWidth:true,
});

我需要获取上一个和下一个的索引，以便将 img 设置为上一个和下一个按钮的背景。

Answer 1

尝试以下代码获取索引，

var owl = $('.cat-slides');
owl.owlCarousel();
owl.on('changed.owl.carousel', function (e) {
      var currentindex = e.item.index;
      return currentindex;
});

Answer 2

首先，有必要了解此旋转木马库会生成 "clones" 的幻灯片，将一半克隆放在幻灯片之前，其余克隆放在幻灯片之后。这是包含 12 个项目的示例：

因此，要获得与活动项目相关的按钮的正确索引，您需要从活动项目的索引中减去一半的克隆数。以下是您的操作方式：

$(".cat-slides").on('changed.owl.carousel', function() {
    // get the index of the active item
    const activeItem = document.querySelector('.owl-carousel.cat-slides .active');
    const allItems = Array.from(activeItem.parentNode.children);
    const index = allItems.indexOf(activeItem);

    // count the clones
    const cloneCount = activeItem.parentNode.querySelectorAll('.cloned').length;

    // take the previous/next item's index, then subtract half the clones from it
    const prevButtonIndex = index - 1 - cloneCount / 2;
    const nextButtonIndex = index + 1 - cloneCount / 2;

    // get references to the next and previous button elements
    const allButtons = document.querySelectorAll('.owl-dot');
    const nextButton = allButtons[nextButtonIndex];
    const prevButton = allButtons[prevButtonIndex];

    // example of how you'd change the background image of each button
    if (nextButton) nextButton.style.backgroundImage = "path/to/next/image";
    if (prevButton) prevButton.style.backgroundImage = "path/to/prev/image";
});

您缺少的下一点是如何获取 previous/next 图像，但我只是回答您提出的问题。如果有任何不清楚的地方，请告诉我。

如何获取 OwlCarousel2 中上一项和下一项的索引？

How can I get the index of prev and next item in OwlCarousel2?

javascript

jquery

slideshow

carousel

owl-carousel-2