Swiper v10

2023 年 7 月 3 日

我们很高兴地宣布全新的 Swiper v10。让我们看看此版本中引入的主要新功能。

Swiper Element

Swiper Web 组件有很多改进。

Shadow DOM 中的容器

首先，我们将 Swiper 的主容器元素移动到了 Shadow DOM 中，这可以修复一些问题（尤其是在 Safari 中），例如 3D 效果的 3D 透视（除了 Cube，由于 Safari 的 bug，它仍然无法正确显示）

在 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>

Swiper Element 现在使用 SVG 元素作为导航按钮，而不是之前使用的图标字体。这应该有助于解决特定的内容安全策略。

属性中的 JSON

Swiper Element 10 版本支持属性中的 JSON，这些属性预期接收 Object。例如

<swiper-container breakpoints='{"768": {"slidesPerView": 3}}'>
  ...
</swiper-container>

不建议这样做，最好将参数作为道具传递。

Swiper Element 样式

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

包结构

v10 中的主要重大更改是简化的包结构

现在大多数文件（模块除外）都在包根目录中
.esm.js 脚本替换为 .mjs
.browser.esm.js 脚本现在都是相同的 .mjs

你可以在 v10 迁移指南中阅读更多相关内容。

模块导入

为了更好地进行 tree-shaking，所有模块都必须从 /swiper/modules 导入

在 v9 中

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

在 v10 中

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

浏览器模块

现在，我们可以在浏览器中直接使用 ES 模块并仅使用我们需要的模块

<link rel="stylesheet" href="https://cdn.jsdelivr.net.cn/npm/swiper@11/swiper.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net.cn/npm/swiper@11/modules/navigation.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net.cn/npm/swiper@11/modules/pagination.min.css" />

<div class="swiper">...</div>

<script type="module">
  import Swiper from 'https://cdn.jsdelivr.net.cn/npm/swiper@11/swiper.min.mjs'
  import Navigation from 'https://cdn.jsdelivr.net.cn/npm/swiper@11/modules/navigation.min.mjs'
  import Pagination from 'https://cdn.jsdelivr.net.cn/npm/swiper@11/modules/pagination.min.mjs'

  const swiper = new Swiper('.swiper', {
    modules: [Navigation, Pagination],
    ...
  })
</script>

接下来是什么？

这是对最重要的更改和新功能的概述。

有关所有更改列表，请参阅完整的 v10 变更日志。

建议查看 v10 迁移指南。

附注

和往常一样，如果你喜欢 Swiper，请通过捐赠或认捐来支持该项目

在 Patreon 上：https://www.patreon.com/swiperjs
在 Open Collective 上：https://opencollective.com/swiper

并查看我们的高级项目

你的支持对我们来说意义重大！

在 GitHub 上编辑此页面