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>

因此，如果您依賴並對 shadow DOM 內部進行一些技巧，則需要考慮新的佈局。

Swiper Element 樣式

Swiper Web 元件不再將全域樣式注入到文件中。在這種情況下，如果您將使用自訂的導航、分頁、滾動條元素，它們將不會被樣式化。

模組導入

為了更好地 tree-shaking，所有模組現在必須從 /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