Как я могу получить индекс текущего слайда, когда слайд изменяется? - PullRequest
Новая
       7

Как я могу получить индекс текущего слайда, когда слайд изменяется?

0 голосов
/ 09 мая 2018

У меня есть следующее 

mySwiper = new Swiper('.my-swiper', {
    direction: 'vertical',
    loop: true,
});
mySwiper.on('slideChange', function () {
    console.log('*** mySwiper.realIndex', mySwiper.realIndex);
});

Но realIndex всегда возвращает предыдущий индекс. Так что, если я на первом слайде (0) и перехожу к следующему, realIndex равен 0, когда должно быть 1. Когда я возвращаюсь к первому слайду, realIndex равен 1, когда оно должно быть 0. Так что кажется, что событие происходит до обновления индекса. Я пробовал другие события, но мне не повезло. Есть ли событие, которое вызывает после изменения слайда, чтобы я мог захватить текущий индекс слайда?

Ответы [ 2 ]

0 голосов
/ 09 мая 2018

Вы должны использовать событие transitionEnd, так как событие будет запущено после перехода.

см. Демонстрацию ниже 

var mySwiper = new Swiper('.swiper-container', {
  direction: 'vertical',
  loop: true,
});
mySwiper.on('transitionEnd', function() {
  console.log('*** mySwiper.realIndex', mySwiper.realIndex);
});
.swiper-container {
  width: 100%;
  height: 100%;
}

.as-console-wrapper {
  z-index: 999999 !important;
}

.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
  /* Center slide text vertically */
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}
<!-- Link Swiper's CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.2.6/css/swiper.min.css">
<!-- Swiper -->
<div class="swiper-container">
  <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 class="swiper-slide">Slide 4</div>
    <div class="swiper-slide">Slide 5</div>
    <div class="swiper-slide">Slide 6</div>
    <div class="swiper-slide">Slide 7</div>
    <div class="swiper-slide">Slide 8</div>
    <div class="swiper-slide">Slide 9</div>
    <div class="swiper-slide">Slide 10</div>
  </div>
</div>

<!-- Swiper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.2.6/js/swiper.min.js"></script>

Примечание. Если вы не можете видеть вывод оператора console.log во фрагменте, используйте F12чтобы увидеть индекс слайда.

0 голосов
/ 09 мая 2018

Согласно API, есть событие slideChangeTransitionEnd, которое "... будет запущено после анимации для другого слайда (следующего или предыдущего)". Это звучит как многообещающее событие, которое стоит попробовать вместо slideChange.

http://idangero.us/swiper/api/

...