【jQuely】index()メソッドを利用して、クリックした要素とスライドショーを連動させる方法

実装したいもの
.FlowItemというクラスをクリックしたら、.swiper-slide正しい順番で表示されるようにしたい。

・初期状態は1番目のブロックがクリックされた状態で、スライドショーはslide1が表示されている
↓
２番目のブロックをクリックしたら、スライドショーはslide2を表示する
↓
3番目のブロックをクリックしたら、スライドショーは3を表示する

要は、ブロックの順番と、表示されるスライドショーの順番を合わせたいということです。

現在の挙動
クリックしたら、スライドをするという動きは実装できています。
がスライドショーが一つずれてしまっているイメージです。
JavaScriptは配列で取る時に、0から数えるというのは知っていますが、indexに-1をしてもダメだったので、記述ミスかと思いますが、書き方がわかりません。
console.logの結果としては、1番目のブロックをクリックすると'0'が取れます。あとはそれに+1されていくイメージです。

具体的な挙動
2番目のブロックをクリックする→反応しない、というより1番目のスライドが表示される
３番目のブロックをクリックする→2番目のスライドが表示される

わかりにくければすみませんが、知恵をお貸しいただければと思います。

jQuely

$('.FlowItem').on('click', function(){
  const index = $(this).index();//クリックした要素のインデックスを取得
  console.log(index);
  swiper.slideTo(index);//指定のスライドを呼び出し
});
コード

HTML

  <section class="secFlow">
    <div class="commonInner">

      <div>
        <div class="commonTitleBlock">
          <h2 class="secCommonTitle">見出し</h2>
          <p class="secCommonEnTitle">Flow</p>
        </div>

        <div class="FlowList">
          <p>テキスト。</p>

          <ul>
            <li class="FlowItem">
              <span>1</span>
              <p>1番目のブロック</p>
            </li>

            <li class="FlowItem">
              <span>2</span>
              <p>２番目のブロック</p>
            </li>

            <li class="FlowItem">
              <span>3</span>
              <p>3番目のブロック</p>
            </li>

            <li class="FlowItem">
              <span>4</span>
              <p>4番目のブロック</p>
            </li>

            <li class="FlowItem">
              <span>5</span>
              <p>5番目のブロック</p>
            </li>
          </ul>
        </div>
      </div>

      <div class='swiper-wrap'>
        <!-- Slider main container -->
        <div class="swiper">
          <!-- Additional required wrapper -->
          <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>
        </div>
        


        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
      </div>

    </div> 
  </section>
コード