SwiperSwiperv11.1.1

Swiper v11 - 基本に戻って

2023年10月24日

最新のアップデートであるSwiper v11を発表できることを大変嬉しく思います。しかし、これは単なるアップデートではありません。v11では、私たちは重要な一歩を踏み出しました。「基本に戻る」ということです。

タッチイベント

Swiperをモバイルタッチスライダーの定番ライブラリにするという継続的な取り組みの中で、私たちはさまざまな道を歩み、テクノロジーを試行錯誤し、常に開発者とエンドユーザーの両方に最高の体験を提供することを目指してきました。私たちが取り組んだ方向性の1つは、Swiper v9でPointer Eventsに移行することであり、タッチイベントとマウスイベントの統一的な処理に最適な方法だと信じていました。

しかし、Pointer Eventsは間違いなく画期的ですが、特定のエッジケースでは常に私たちが目指すシームレスなタッチ体験を提供するとは限らないことに気づきました。コミュニティからのフィードバックと厳格なテストにより、タッチ操作におけるいくつかのニュアンスと制限が明らかになりました。

最高のユーザーエクスペリエンスへのコミットメントを考慮して、v11ではタッチイベントのサポートを再導入することにしました（サポートされている場合）。「基本に戻る」ことで、タッチ操作が適切である必要がある小さな瞬間、それらのエッジケースを完璧に処理できるようになります。

少なくとも、以下のケースが修正および改善されます。

  • edgeSwipeDetectionおよびtouchReleaseOnEdgesパラメーターは、タッチイベントをサポートするデバイス（iOS/Android）で正しく動作するようになりました。
  • ページスクロールの検出と防止が改善されました。

ループモード

ループモードはv11で大幅に改善されました。

  • grid.rowsによる複数行レイアウトのサポートを追加しました。
  • loopedSlidesパラメーターを削除しました。
  • 「ループ」のための追加のスライドを定義する代わりに、loopAdditionalSlidesパラメーターを追加しました（再配置）。
  • slidesPerGroupとgrid.rowsのために空のスライドを自動的に追加する新しいloopAddBlankSlidesパラメーター。
  • スライド数の要件を緩和しました。
    • スライドの最小数は、slidesPerView + slidesPerGroup 以上である必要があります。
    • スライドの数はslidesPerGroupに対して偶数である必要があります（またはloopAddBlankSlidesパラメーターを使用してください）。
    • スライドの数はgrid.rowsに対して偶数である必要があります（またはloopAddBlankSlidesパラメーターを使用してください）。

たとえば、slidesPerView: 3の場合、v10ではループモードには少なくとも6つのスライドが必要でした。v11では、4つのスライドのみが必要になりました。

要素イベントプレフィックス

Swiper要素は、Swiperクラスイベントと同じイベント名を使用してネイティブDOMイベントを発行します。これにより、サードパーティライブラリがtouchstart、touchmoveなどの同様のネイティブDOMイベントを使用している場合に問題が発生しました。そのため、v11では、すべてのSwiper要素イベントにswiperプレフィックスが付けられるようになりました（eventsPrefixパラメーターで設定可能）。

これは次のように使用できます。

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

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

オーバーフロー非表示

Swiper v10では、コンテナーのoverflowプロパティはデフォルトでclipに設定されていました。しかし、すべてのブラウザがこのプロパティを正しくサポートするわけではないことが判明したため、v11ではデフォルトのSwiperコンテナーのスタイルをoverflow: hiddenに戻しました。

今後の予定

これは、最も重要な変更と新機能の概要です。

すべての変更リストについては、v11の完全な変更ログを参照してください。

また、v11への移行ガイドを確認することをお勧めします。

追伸

そしていつものように、Swiperがお好きでしたら、寄付またはプレッジによってプロジェクトをサポートしてください。

そして、当社のプレミアムプロジェクトをチェックしてください。

皆様のサポートは私たちにとって大きな意味があります！

GitHubでこのページを編集する