How can I get the index of the current slide, when the slide is changed?

Question

I have the following

mySwiper = new Swiper('.my-swiper', {
    direction: 'vertical',
    loop: true,
});
mySwiper.on('slideChange', function () {
    console.log('*** mySwiper.realIndex', mySwiper.realIndex);
});

But realIndex always returns the previous index. So if I'm on the first slide (0) and go to the next, realIndex is 0 when it should be 1. When I go back to the first slide realIndex is 1 when it should be 0. So it seems the event fires before the index is updated. I've tried other events but haven't had any luck. Is there an event that fires after the slide is changed so that I can capture the current slide index?

Turkmen

I'm not familiar with Swiper, but is there possibly an event object passed to the slideChange listener that would tell you what you want, like mySwiper.on('slideChange', function (event) {...? – Christinachristine

Answer 1

You should use transitionEnd event as Event will be fired after the transition.

see a demo below

var mySwiper = new Swiper('.swiper-container', {
  direction: 'vertical',
  loop: true,
});
mySwiper.on('transitionEnd', function() {
  console.log('*** mySwiper.realIndex', mySwiper.realIndex);
});

.swiper-container {
  width: 100%;
  height: 100%;
}

.as-console-wrapper {
  z-index: 999999 !important;
}

.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
  /* Center slide text vertically */
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}

<!-- Link Swiper's CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.2.6/css/swiper.min.css">
<!-- Swiper -->
<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide">Slide 1</div>
    <div class="swiper-slide">Slide 2</div>
    <div class="swiper-slide">Slide 3</div>
    <div class="swiper-slide">Slide 4</div>
    <div class="swiper-slide">Slide 5</div>
    <div class="swiper-slide">Slide 6</div>
    <div class="swiper-slide">Slide 7</div>
    <div class="swiper-slide">Slide 8</div>
    <div class="swiper-slide">Slide 9</div>
    <div class="swiper-slide">Slide 10</div>
  </div>
</div>

<!-- Swiper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.2.6/js/swiper.min.js"></script>

Note: If you are not able to see the console.log statement output in the snippet, use F12 to see the index of the slide.

Omnibus

Answer 2

mySwiper.on('slideChange', function (e) {
    console.log('*** mySwiper.activeIndex', mySwiper.activeIndex);
});

Envious

While this code may answer the question, providing additional context regarding how and/or why it solves the problem would improve the answer's long-term value. You can find more information on how to write good answers in the help center: stackoverflow.com/help/how-to-answer . Good luck 🙂 – Deictic

Answer 3

If you use new versions of swiper js, you should use "on" keyword inside of Swiper "options" param, see below code for example

Swiper(".swiper-post",  { 
    on: { 
        slideChange: function() {
          let slideCurrentIndex = this.realIndex; // get current slide's index
          console.log(this.realIndex); // write it to console
    }}
})

Urogenital

Answer 4

According to the API, there's an event slideChangeTransitionEnd which "...will be fired after animation to other slide (next or previous)". That sounds like a promising event to try instead of slideChange.

http://idangero.us/swiper/api/

Christinachristine

Answer 5

You can Access all property and methods available by swiper in your callback function.

var swiper = new Swiper(".mySwiper", {      
    navigation: {
      nextEl: ".swiper-button-next",
      prevEl: ".swiper-button-prev",
    }
});

swiper.on('slideChange', function () {
    myCallbackfunction(this);

  });

function myCallbackfunction(data){
    console.log(data.realIndex);
    //console.log(data);
}

Boutonniere