Ravi Ranjan Ravi Ranjan - 1 month ago 41
Javascript Question

How to detect current slide in swiper js?

Working with swiper js for a slider and want to detect the current image/slide. how i can detect with HTML and JS? any idea?

<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

As far as I can see from their demos, the current slide always has the .swiper-slide-active class on the current slide element.

You can use jQuery selectors to get properties from the active slide. Here's an example of me fetching its image source:

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