Swiper 11 移行ガイド

ループモード

バージョン 11 ではループモードが大幅に改善されました。ここで注意すべき変更点は 1 つだけです

• loopedSlides パラメーターが削除されました。スライダーのループ動作が中断された場合は、新しい loopAdditionalSlides パラメーターを使用してみてください

Element イベントの接頭辞

デフォルトでは、すべての Swiper Element イベントに swiper が接頭辞として付けられるようになりました。新しいイベントを受信するようにコードを変更するか、または eventsPrefix: ''（空文字列）パラメーターを指定して以前の動作に戻す必要があります。

<swiper-container> ... </swiper-container>
<script>
  const swiperEl = document.querySelector('swiper-container');

  // listen for `slideChange` event
  swiperEl.addEventListener('swiperslidechange', onSlideChange);
</script>

オーバーフロー非表示

Swiper のバージョン 11 では、コンテナーの overflow CSS プロパティのデフォルト値が hidden になりました。レイアウトが壊れた場合は、カスタム CSS スタイルを追加してください

.swiper {
  overflow: clip;
}