Question

使用滑块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>

Answer 1

非常容易。用这个：

swiper.activeIndex

Answer 2

就我从他们的演示中看到的那样，当前幻灯片在当前幻灯片元素上始终具有.swiper-slide-active类。

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

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

Answer 3

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

swiper.realIndex

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

通知：

属性以字符串形式返回
属性从0开始，与在循环模式下，activeIndex以1开头

Answer 4

扩展已经涉及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 () {
      let index_currentSlide = instance_swiper.realIndex,
      currentSlide = instance_swiper.slides[index_currentSlide]
      //
      currentSlide.style.background = "red";
    },
  },
});

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

4 个答案: