当幻灯片更改时，如何获取当前幻灯片的索引？答案

【问题标题】：How can I get the index of the current slide, when the slide is changed?当幻灯片更改时，如何获取当前幻灯片的索引？
【发布时间】：2018-05-09 02:07:32
【问题描述】：

我有以下

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

但是realIndex 总是返回前一个索引。因此，如果我在第一张幻灯片 (0) 上并转到下一张，realIndex 应该是 1 时为 0。当我回到第一张幻灯片时，realIndex 应该为 0 时为 1。所以它似乎事件在索引更新之前触发。我尝试过其他活动，但没有任何运气。是否有一个事件在幻灯片更改后触发，以便我可以捕获当前幻灯片索引？

【问题讨论】：

我不熟悉 Swiper，但是否有可能传递给 slideChange 侦听器的事件对象会告诉您您想要什么，例如 mySwiper.on('slideChange', function (event) {...？

标签： javascript swiper

【解决方案1】：

您应该使用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>

注意：如果您无法在 sn-p 中看到 console.log 语句输出，请使用 F12 查看幻灯片的索引。

【讨论】：

【解决方案2】：

mySwiper.on('slideChange', function (e) {
    console.log('*** mySwiper.activeIndex', mySwiper.activeIndex);
});

【讨论】：

虽然此代码可能会回答问题，但提供有关它如何和/或为什么解决问题的额外上下文将提高答案的长期价值。您可以在帮助中心找到更多关于如何写好答案的信息：stackoverflow.com/help/how-to-answer。祝你好运?

【解决方案3】：

根据 API，有一个事件 slideChangeTransitionEnd “...将在动画到其他幻灯片（下一张或上一张）后触发”。这听起来像是一个很有希望的活动，而不是slideChange。

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

【讨论】：