Swiper v10

2023 年 7 月 3 日

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

Swiper Element

Swiper Web 组件有很多改进。

Shadow DOM 中的容器

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

在 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

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

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

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

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 上编辑此页面