如何检测 swiper js 中的当前幻灯片？答案

【问题标题】：How to detect current slide in swiper js?如何检测 swiper js 中的当前幻灯片？
【发布时间】：2015-10-05 09:22:26
【问题描述】：

为滑块使用 swiper js，并希望检测当前图像/幻灯片。我如何使用 HTML 和 JS 进行检测？有什么想法吗？

<div class="swiper-container">
    <div class="swiper-wrapper" align="center">
        <div class="swiper-slide">
            <img src="images/card_gold.png" width="80%" align="middle" onclick="desc(\'' + card1 + '\')">
        </div>
        <div class="swiper-slide">
            <img src="images/card_platinum.png" width="80%" align="middle" onclick="desc(\'' + card2 + '\')">
        </div>
        <div class="swiper-slide">
            <img src="images/card_silver.png" width="80%" align="middle" onclick="desc(\'' + card3 + '\')">
        </div>
    </div>
    <!-- Add Arrows -->
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
</div>

【问题讨论】：

您希望从当前图像/幻灯片中获得哪些信息？
idangero.us/swiper/api/#.VhJDi_mqpHw 在此页面中我们可以使用 > mySwiper.activeIndex 当前活动幻灯片的索引号注意，在循环模式下，活动索引值将始终在多个循环/重复的幻灯片上移动以获得当前幻灯片的索引。谢谢大家:)

标签： javascript swiper

【解决方案1】：

这很容易。就用这个：

swiper.activeIndex

【讨论】：

这是正确且推荐的答案，因为它使用 Swiper 来确定当前幻灯片，而不是某些可能尚未分配的外部 css 类。
请注意：这个值将是 1-indexed 而not 0-indexed。
需要注意的是返回值是从零开始的......所以如果您的第一张幻灯片处于活动状态，则返回值为 0，如果是幻灯片 5，则返回值为 4。跨度>
应该注意swiper.activeIndex 与幻灯片上的data-swiper-slide-index 不匹配。为此，您应该使用swiper.realIndex，如下所述。
这似乎是 swiper v5.x 的有效答案

【解决方案2】：

扩展已经引用realIndex 属性的答案，这是一种使用realIndex 和slides 属性（包含实例的所有幻灯片的数组）获取当前幻灯片元素的方法获取幻灯片元素：

let index_currentSlide = instance_swiper.realIndex;
let currentSlide = instance_swiper.slides[index_currentSlide]

您可以在构造实例时使用此功能，方法是（例如）在slideChange 事件发生时获取当前幻灯片并操作元素：

const instance_swiper = new Swiper(".swiper-container", {
  on: {
    slideChange: function () {
      const index_currentSlide = instance_swiper.realIndex;
      const currentSlide = instance_swiper.slides[index_currentSlide]
      //
      currentSlide.style.background = "red";
    },
  },
});

【讨论】：

顺便说一句，实例在事件处理程序方法的上下文中绑定到this，因此您不必对变量名称进行硬编码：例如this.readIndex.
@Tim 感谢您指出这一点。所以我可以把第一个变量声明去掉，减少到const currentSlide = this.slides[this.realIndex]，对吧？
您可以在slideChange 方法中将instance_swiper 替换为this。

【解决方案3】：

截至 2016 年 5 月，他们添加了 realIndex 属性！

swiper.realIndex

https://github.com/nolimits4web/Swiper/pull/1697

注意：

属性以字符串形式返回
属性以 0 开头，不像循环模式下的 activeIndex，在我的例子中以 1 开始

【讨论】：

【解决方案4】：

据我从他们的演示中可以看出，当前幻灯片始终在当前幻灯片元素上具有 .swiper-slide-active 类。

您可以使用 jQuery 选择器从活动幻灯片中获取属性。这是我获取其图像源的示例：

$('.swiper-slide-active img').attr('src')

【讨论】：

不推荐。