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

Question

正在为滑块使用 swiper js，并希望检测当前 image/slide。我如何使用 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>

Answer 1

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

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

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

Answer 2

非常简单。只需使用这个：

swiper.activeIndex

Answer 3

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

swiper.realIndex

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

注意事项：

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

Answer 4

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

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";
    },
  },
});

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

How to detect current slide in swiper js?

javascript

swiper