Как я могу получить индекс предыдущей и следующей позиции в OwlCarousel2?

Question

Как я могу получить индекс элементов next и prev в OwlCarousel для настройки фоновых изображений для кнопок next и prev?Я сделал базовый вариант карусели.

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

Мне нужно получить индексы prev & next, чтобы установить img в качестве фона для кнопок prev и next.

Answer 1

Прежде всего необходимо понять, что эта библиотека карусели генерирует «клоны» ваших слайдов, помещая половину клонов перед вашими слайдами, а оставшиеся клоны - после ваших слайдов.Вот как выглядит пример с 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";
});

Следующий бит, который вам не хватает, - это как получить предыдущие / следующие изображения, но я только отвечаю на вопрос, который вы задали.Если что-то неясно, дайте мне знать.

Answer 2

Попробуйте следующий код, чтобы получить индекс,

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