我們很高興宣布全新的 Swiper v10。讓我們看看這個版本中的主要新功能。
Swiper Element
Swiper 網頁元件有很多改進。
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 支援在期望接收 Object 的屬性中使用 JSON。例如
<swiper-container breakpoints='{"768": {"slidesPerView": 3}}'>
...
</swiper-container>
不建議這樣做，最好將參數作為 props傳遞。
Swiper Element 樣式
Swiper 網頁元件不再將全域樣式注入文件中。在這種情況下，如果您將使用自訂的導覽、分頁、捲軸元素，它們將不會被樣式化。
套件結構
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/npm/swiper@11/swiper.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/modules/navigation.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/modules/pagination.min.css" />
<div class="swiper">...</div>
<script type="module">
import Swiper from 'https://cdn.jsdelivr.net/npm/swiper@11/swiper.min.mjs'
import Navigation from 'https://cdn.jsdelivr.net/npm/swiper@11/modules/navigation.min.mjs'
import Pagination from 'https://cdn.jsdelivr.net/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
並查看我們的進階專案
您的支持對我們意義重大！