Swiper 10 迁移指南

Swiper 元素布局

¥Swiper Element Layout

Swiper Element 现在附带额外的 <div class="swiper"> 主元素内部布局。

¥Swiper Element now comes with additional <div class="swiper"> main element internal layout.

在 v9 中：

¥In v9:

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

在 v10 中：

¥In v10:

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

如果你依赖 Shadow DOM 内部机制并对其进行一些技巧，则需要考虑新的布局。

¥So if you rely and do some tricks with shadow DOM internals, you need to consider new layout.

Swiper 元素样式

¥Swiper Element Styles

Swiper Web 组件不再向文档注入全局样式。在这种情况下，如果你使用自定义导航、分页、滚动条元素，则不会为它们设置样式。

¥Swiper web component doesn't inject global styles to document anymore. In this case if you will use custom navigation, pagination, scrollbar elements they will be not styled.

模块导入

¥Modules Imports

为了更好地进行摇树优化，现在必须从 /swiper/modules 导入所有模块

¥For better tree-shaking all modules must be imported now from /swiper/modules

在 v9 中：

¥In v9:

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

在 v10 中：

¥In v10:

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

包结构

¥Package Structure

v10 中的主要重大变更是简化了包结构：

¥Main breaking change in v10 is the simplified package structure:

• 大多数文件（模块除外）现在位于包根目录中

  ¥most of the files (except modules) are now in the package root

• .esm.js 脚本已被 .mjs 替换。

  ¥.esm.js scripts replaced with .mjs

• .browser.esm.js 脚本现在与 .mjs 相同。

  ¥.browser.esm.js scripts are now same .mjs

如果你直接导入文件，则需要考虑这一点。以下是新的包结构：

¥You need to consider it if you import files directly. Here is the new package structure:

/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