web-dev-qa-db-ja.com

スワイパーjsで現在のスライドを検出する方法は？

スライダーのスワイパー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>
javascriptswiper
7
Ravi Ranjan

それは非常に簡単です。これを使うだけです：

swiper.activeIndex
18
Timsta

デモから見る限り、現在のスライドには常に.swiper-slide-active現在のスライド要素のクラス。

JQueryセレクターを使用して、アクティブなスライドからプロパティを取得できます。ここに私がその画像ソースを取得する例があります：

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

2016年5月現在、realIndexプロパティが追加されています。

swiper.realIndex

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

お知らせ：

  • プロパティは文字列として返されます
  • プロパティは0で始まります。ループモードのactiveIndexとは異なり、私の場合は1で始まります。
3
Torben