swiper.jsで現在表示している（切り替えた後の）ページ番号を取得したい

Question

swiper.jsのactiveIndexの取得タイミングがうまくいかない

現在、swiper.jsを利用し、「スライド後」のページ番号(swiperContentsのactiveIndex)を取得しようと試みています。

発生している問題・エラーメッセージ

①取得できるときとできないときがある。
②例えばページが3つあり（仮にA,B,Cとする）、A→Bに遷移したときはキチンと「１」という番号が取得できます。
（ちなみにA=0,B=1,C=2というページ番号になっています）がC→B、B→Aにいくと「-1」という番号になります。
一度「-1」になると以降「-1」になります。

※メニュー部分を押して切り替える際はきちんと正常動作致します。コンテンツ部分のスライドのみが問題となります。

※２つswiperがありますが、問題になっているのは
クラス名が「.swiper-contents」の箇所です。
jsの変数名でいうと「swiperContents」です。

該当のソースコード

document.addEventListener("init", function(event) {
        $(function(){
          function setCurrentSlide(ele, index) {
            $(".swiper-navigation .swiper-slide").removeClass('selected');
            ele.addClass('selected');
          }
          swiperNavigation = new Swiper('.swiper-navigation', {
            slidesPerView: 'auto',
            pagination: {
              clickable: true
            },
            freeMode: true,
            loop: false,
            autoplay: false
          });
          swiperContents = new Swiper('.swiper-contents', {
            direction: 'horizontal',
            loop: false,
            autoHeight: true
          });
          swiperContents.on('slideChange', function() {
            // 特定の要素を引数に指定し、順番を変数に格納
            var i = swiperContents.activeIndex;
            // 変数の中身をコンソールに表示
            console.log(i);
            setCurrentSlide($('.swiper-navigation .swiper-slide').eq(i), i);
            swiperNavigation.slideTo(i, 500, false);
          });

<div class="container contents">
      <div class="swiper-container swiper-navigation">
        <div class="swiper-wrapper sp-navi">
          <div class="swiper-slide selected">メニュー１</div>
          <div class="swiper-slide">メニュー２</div>
          <div class="swiper-slide">メニュー３</div>
        </div>
      </div>
      <div class="swiper-container swiper-contents">
          <div class="swiper-wrapper sp-content">
              <div class="swiper-slide">
                  <p>メニュー1コンテンツ</p>
              </div>
              <div class="swiper-slide">
                  <p>メニュー2コンテンツ</p>
              </div>
              <div class="swiper-slide">
                  <p>メニュー3コンテンツ</p>
              </div>
          </div>
      </div>
    </div>

試したこと

イベントのslideChangeの実行タイミングが悪いのかと思い、そのほかにも
slideChangeTransitionEnd
transitionEnd
progress
などを試しましたが、直りませんでした。

補足情報（FW/ツールのバージョンなど）

https://nonbiri.life/web/javascript/swiper/
このサイトを参考に作成致しました。

また、ハイブリッドアプリを作成しているため、ios,androidを実機としてプレビューしています。

Comments

[Kapustin]

上記のコードで再現してみようと思いましたが、質問内容にある不具合は再現できませんでした。
現象を再現するのに必要なコード全体や実行環境など、再現手順を追記すると回答がつくかもしれません。

Answer 1

ただいま自己解決致しました。
邪道ではございますが

setTimeout(function(){
              var index = $('div.sp-content > div.swiper-slide-active').index();
              console.log(index);
              setCurrentSlide($('.swiper-navigation .swiper-slide').eq(index), index);
              swiperNavigation.slideTo(index, 500, false);
            },250);

という形でjqueryのセレクタ要素の順番取得および、settimeoutによる遅延実行により解決させました。