Owl Carousel Текущий слайд и количество слайдов с опцией цикла (php)

Итак, я пока рассмотрел несколько вопросов, и ни один из них, которые я видел, действительно не помог мне найти решение.

Мне нужно установить счетчик на моем слайдере, использующем Owl Carousel. Мне нужно получить текущее количество слайдов и количество элементов в слайдере.

Дело в том, что я говорю ползунку возвращаться к началу, когда он достигает последнего слайда.

Некоторые из примеров кода, которые я просмотрел, работают, за исключением одного. Кажется, Owl Carousel добавляет 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 jquery owl-carousel-2
person Ishio    schedule 01.02.2018    source источник

Ответы (2)


arrow_upward
4
arrow_downward

Я нашел это решение в Интернете, которое отлично работает https://codepen.io/maer2k/pen/qPVWEd

Я разбил его на более понятный код.

var gallery = $('.owl-carousel');

gallery.owlCarousel({
  items: 1,
  loop: true,
  onInitialized: counter,
  onChanged: counter,
});

function counter(event) {
  if (!event.namespace) {
    return;
  }
  var slides = event.relatedTarget;
  $('.slider-counter').text(slides.relative(slides.current()) + 1 + '/' + slides.items().length);
}

Он делает то, что обещает. Но я понятия не имею, что на самом деле делают event.relatedTarget и .relative(), я впервые вижу их реализованными. Также пространство имен, связанное с оператором if, на самом деле не требуется для его работы.

Это не похоже на базовый код owl-carousel. Было бы здорово, если бы кто-нибудь попытался объяснить мне, как работает эта магия :D

person Francesco Zeno Selva    schedule 05.04.2019

arrow_upward
0
arrow_downward

Итак, этот ответ для тех, кто использует php и выполняет цикл foreach.

Что я сделал, так это установил data-dot с возрастающим числом. Затем я подсчитал количество элементов в массиве и передал его как окончательный счет элементов.

Затем, обратившись к контейнеру и с некоторой абсолютной позицией для CSS, я смог в каком-то смысле «обмануть» клиентскую программу просмотра.

Не очень эффективно, но мне помогает.

person Ishio    schedule 02.02.2018