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

Как мога да получа индекса на следващите и предишните елементи в OwlCarousel за задаване на фонови изображения за бутоните следващ и предишен? Направих основния вариант на въртележка.

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

Трябва да получа индекси на предишни и следващи, за да задам изображенията като фон за бутоните предишни и следващи.


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