Итак, я рассмотрел несколько вопросов, и ни один из них, которые я видел, действительно не помог мне найти решение.
Мне нужно получить счетчик на моем слайдере, который использует Карусель Совы. Мне нужно получить текущее количество слайдов и количество элементов в слайдере.
Дело в том, что я говорю ползунку вернуться к началу, когда он попадает на последний слайд.
Некоторые примеры кода, которые я посмотрел на работе, кроме одной вещи. Кажется, Сова Карусель добавляет 2 предмета в начале и 2 предмета в конце, с классом cloned
добавлен к ним. Это портит счетчики кода, которые я использовал.
Я пытался выделить клонированный счетчик, и это работает, но currentIndex
это где я впадаю в проблемы. Попытка получить этот счет, чтобы быть точным, не работает. Если я скажу 4 слайда, currentIndex
начинается в 3 и идет до 8 в то время как totalItems
показывает 4.
Любая помощь приветствуется!
я использую OwlCarousel 2
Вот код, который я использую:
var = mapSliderOptions = {
loop: true,
margin: 0,
items: 1,
autoWidth: false,
mouseDrag: true,
touchDrag: true,
dots: false,
onInitialized : counter, //When the plugin has initialized.
onTranslated : counter,
responsive: {
0: {
autoplay: true,
autoplayTimeout: 5000,
autoplayHoverPause: true
},
768: {
autoplay: false,
items: 1
}
}
},
function counter(event) {
var totalItems = $('.owl-item:not(.cloned)' ).length;
var currentIndex = $('div.active').index() + 1 ;
$('#counter').html("item "+ currentIndex +" of " + totalItems);
}$('.map-hero-slider').owlCarousel( mapSliderOptions );
Так что этот ответ для тех, кто использует php и работает foreach
петля.
Что я сделал, я установил data-dot
с инкрементным номером. Затем я посчитал количество элементов в массиве и передал его в качестве окончательного количества элементов.
Затем, обращаясь к контейнеру и с некоторой абсолютной позицией для CSS, я смог в некотором смысле «обмануть» зрителя внешнего интерфейса в счетчике.
Не очень эффективно, но у меня это работает.
Других решений пока нет …