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

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

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

Мне нужно получить индекс предыдущего и следующего, чтобы установить img в качестве фона для кнопок «предыдущий» и «следующий».


javascript carousel jquery owl-carousel-2 slideshow
person nptsh    schedule 08.10.2018    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Во-первых, необходимо понять, что эта карусельная библиотека генерирует «клоны» ваших слайдов, помещая половину клонов перед вашими слайдами, а оставшиеся клоны — после ваших слайдов. Вот как выглядит пример с 12 элементами:

клоны DOM совы

Таким образом, чтобы получить правильный индекс кнопки по отношению к активному элементу, вам нужно вычесть половину количества клонов из индекса активного элемента. Вот как вы это сделаете:

$(".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";
});

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

person Darren    schedule 08.10.2018

arrow_upward
0
arrow_downward

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

var owl = $('.cat-slides');
owl.owlCarousel();
owl.on('changed.owl.carousel', function (e) {
      var currentindex = e.item.index;
      return currentindex;
});
person user3040610    schedule 08.10.2018
comment
Я это сделал. И теперь я пытаюсь получить индекс prev&next (я сейчас о inc и dec) для установки изображения bg для кнопок prev&next. - person nptsh; 08.10.2018