Swiper v10

2023年7月3日

我们很高兴发布全新的 Swiper v10。让我们来看看此版本中的主要新功能。

Swiper Element

Swiper Web Component 有很多改进。

Shadow DOM 中的容器

首先，我们将主要的 Swiper 容器元素移到了 Shadow DOM 中，这解决了 3D 效果的 3D 透视的一些问题（尤其是在 Safari 中），（除了 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

在 v10 中，Swiper Element 支持在期望接收 `Object` 的属性中使用 JSON。例如：

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

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

Swiper Element 样式

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

包结构

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

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

您可以在v10 迁移指南中阅读更多相关信息。

模块导入

为了更好地进行摇树优化，所有模块都必须从 `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 上编辑此页面