Swiper 10 への移行ガイド

Swiper Element レイアウト

Swiper Element に <div class="swiper"> のメイン要素を内部的にレイアウトする機能が追加されました。

v9 では

<swiper-container>
  <!-- shadow -->
  <div class="swiper-wrapper">
    <slot />
  </div>
</swiper-container>

v10 では

<swiper-container>
  <!-- shadow -->
  <div class="swiper">
    <div class="swiper-wrapper">
      <slot />
    </div>
  </div>
</swiper-container>

シャドウ DOM の内部で何か特殊なものを使っている場合は、新しいレイアウトを考慮する必要があります。

Swiper Element のスタイル

Swiper Web コンポーネントは、ドキュメントにグローバルスタイルを挿入しなくなりました。ここでは、カスタムナビゲーション、ページネーション、スクロールバーの要素を使用する場合、スタイルが設定されません。

モジュールのインポート

より適切なツリーシェイキングのために、すべてのモジュールは /swiper/modules からインポートする必要があります。

v9 では

import Swiper, { Navigation, Pagination } from 'swiper';

v10 では

import Swiper from 'swiper';
import { Navigation, Pagination } from 'swiper/modules';

パッケージ構造

v10 の主な非互換性の変更点は、パッケージ構造の簡略化です。

• ほとんどのファイル（モジュールを除く）は、パッケージのルートにあります。
• .esm.js スクリプトは .mjs に置き換えられました。
• .browser.esm.js スクリプトは、すべて .mjs になりました。

ファイルを直接インポートする場合、この変更を考慮する必要があります。以下は新しいパッケージ構造です。

/modules/
/shared/
/types/
/package.json
/swiper-bundle.css
/swiper-bundle.js
/swiper-bundle.min.css
/swiper-bundle.min.js
/swiper-bundle.min.js.map
/swiper-bundle.min.mjs
/swiper-bundle.min.mjs.map
/swiper-bundle.mjs
/swiper-element-bundle.js
/swiper-element-bundle.min.js
/swiper-element-bundle.min.js.map
/swiper-element-bundle.min.mjs
/swiper-element-bundle.min.mjs.map
/swiper-element-bundle.mjs
/swiper-element.d.ts
/swiper-element.js
/swiper-element.min.js
/swiper-element.min.js.map
/swiper-element.min.mjs
/swiper-element.min.mjs.map
/swiper-element.mjs
/swiper-react.d.ts
/swiper-react.mjs
/swiper-vars.less
/swiper-vars.scss
/swiper-vue.d.ts
/swiper-vue.mjs
/swiper.css
/swiper.d.ts
/swiper.js
/swiper.less
/swiper.min.css
/swiper.min.js
/swiper.min.js.map
/swiper.min.mjs
/swiper.min.mjs.map
/swiper.mjs
/swiper.scss