SwiperjsのNavigationが1度しか動作しない場合の対処法

• fadeエフェクトを使用している
• swiperのcssはコアのみ使用している

という状況でprevとnextボタンがロード直後に1度しか動作しない現象に遭遇。

コードは以下

const slider = new Swiper ('.swiper-container', {
  loop: true,
  speed: 2000,
  effect: 'fade',
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
  pagination: {
    el: '.swiper-pagination',
    clickable: true,
  },
});

原因を探ったところ、以下のfade用のcssを追加したら解決しました。
swiper/components/effect-fade/effect-fade.scss

.swiper-container-fade {
  &.swiper-container-free-mode {
    .swiper-slide {
      transition-timing-function: ease-out;
    }
  }
  .swiper-slide {
    pointer-events: none;
    transition-property: opacity;
    .swiper-slide {
      pointer-events: none;
    }
  }
  .swiper-slide-active {
    &,
    & .swiper-slide-active {
      pointer-events: auto;
    }
  }
}