Swiper и текущий индекс страницы - PullRequest
Новая
       84

Swiper и текущий индекс страницы

0 голосов
/ 19 февраля 2020

Я использую Swiper API , чтобы позволить пользователю пролистывать несколько страниц на моем HTML5 / JS / CSS сайте. Я инициализировал swiper (заметьте, я использую Framework7, который включает Swiper API в качестве внутреннего модуля, объект app представляет экземпляр Framework7: 

var swiper = app.swiper.create('#swiper', {
    speed: 200,
    spaceBetween: 0,
    initialSlide: 0,
    loop: true,
    pagination: {
        el: '.swiper-pagination',
        type: 'bullets',
    },
    autoHeight: true,
});

У меня также есть три слайда на моем HTML : 

<div class="swiper-container" id="swiper">
    <div class="swiper-wrapper"> 
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
    </div>
    <div class="swiper-pagination"></div>
</div>

Я написал слушатель для прослушивания изменений страницы: каждый раз, когда пользователь перемещается на следующую страницу, происходит событие transitionEnd 

swiper.on("transitionEnd", function(e){
    var slideIndex = swiper.activeIndex;
    console.log("I'm on slide no: "+slideIndex);
});

Когда я пытаюсь получить текущий индекс слайда (swiper.activeIndex). Я получаю очень странные результаты: я ожидаю получить число 0, 1 или 2 (индекс текущей страницы). Если я не оборачиваюсь, получаю 1,2, 3 (хорошо, не на основе 0, отлично, я добавлю -1). Если я обертываю (Swiper плавно перелистывает в l oop, оборачивая страницы), я также получаю 0 и 4 как индексы, и я не знаю почему.

В документации сказано, что в режиме l oop (loop: true) индекс активной страницы работает следующим образом:

Номер индекса текущего активного слайда

Обратите внимание, что в режиме l oop значение активного индекса всегда будет смещено на число Бер зацикленных / дублированных слайдов

Все еще не понимаю это предложение. "смещено на количество зацикленных слайдов"?

Проверка HTML Я вижу, что Swiper API создает дополнительные "дубликаты" слайдов в крайнем левом и правом положениях "реальной" последовательности слайдов, чтобы создать эффект плавного l oop на всех страницах.

Но если у меня просто есть 3 страницы, почему я получаю индексы 0 и 4 вместо 1,2,3? (page1 = 1, page2 = 2, page3 = 3)?

...