我們非常興奮地推出最新更新：Swiper v11。但這不只是一般的更新。透過 v11，我們邁出重要的一步 — 我們要「回歸基礎」。
觸控事件
為了不斷努力使 Swiper 成為行動觸控滑塊的首選函式庫，我們嘗試了各種方法、實驗了各種技術，並且一直致力於為開發人員和終端使用者提供最佳體驗。我們採取的其中一個方向是在 Swiper v9 中轉向指標事件，認為這是統一處理觸控和滑鼠事件的最佳方案。
然而，我們注意到，雖然指標事件無疑具有革命性，但在某些邊緣情況下，它們並不能始終提供我們期望的流暢觸控體驗。來自社群的回饋，加上我們嚴格的測試，突顯了一些觸控互動的細微差別和限制。
鑑於我們對最佳使用者體驗的承諾，我們決定在 v11 中重新引入對觸控事件的支援（在支援的情況下）。透過「回歸基礎」，我們確保那些邊緣情況，那些需要讓觸控感覺恰到好處的微小時刻，都能得到完美的處理。
至少它可以修復並改進以下情況
edgeSwipeDetection和touchReleaseOnEdges參數現在在支援觸控事件的裝置上（iOS/Android）正常運作- 改進了頁面滾動偵測和預防
循環模式
v11 中的循環模式已得到大幅改進
- 新增了對具有
grid.rows的多行佈局的支援 - 移除了
loopedSlides參數 - 新增了
loopAdditionalSlides參數，取代定義「循環」（重新排列）的額外幻燈片 - 新增了
loopAddBlankSlides參數，它會自動為slidesPerGroup和grid.rows新增空白幻燈片 - 對幻燈片數量的要求放寬了
- 最小幻燈片數量必須 >=
slidesPerView+slidesPerGroup - 幻燈片數量應為
slidesPerGroup的偶數（或使用loopAddBlankSlides參數） - 幻燈片數量應為
grid.rows的偶數（或使用loopAddBlankSlides參數）
- 最小幻燈片數量必須 >=
例如，如果我們有 slidesPerView: 3，在 v10 中，我們至少需要 6 張幻燈片才能使用循環模式。在 v11 中，我們現在只需要 4 張幻燈片。
元素事件前綴
Swiper Element 使用與 Swiper 類別事件相同的事件名稱發出原生 DOM 事件。如果協力廠商函式庫使用類似的原生 DOM 事件，例如 touchstart、touchmove 等，這會導致問題。因此，在 v11 中，所有 Swiper Element 事件現在都有一個 swiper 前綴（可在 eventsPrefix 參數中設定）。
現在可以如下使用
<swiper-container> ... </swiper-container>
<script>
const swiperEl = document.querySelector('swiper-container');
// listen for `slideChange` event
swiperEl.addEventListener('swiperslidechange', onSlideChange);
</script>
溢出隱藏
在 Swiper v10 中，容器的 overflow 屬性預設為 clip。事實證明，並非所有瀏覽器都正確支援此屬性，因此在 v11 中，我們將預設 Swiper 容器樣式還原為 overflow: hidden。
接下來是什麼？
以上是對大多數重大變更和新功能的概述。
有關所有變更列表，請參閱完整的 v11 變更日誌。
建議查看v11 遷移指南。
附註
與往常一樣，如果您喜歡 Swiper，請透過捐款或承諾來支持專案
- 在 Patreon 上：https://www.patreon.com/swiperjs
- 在 Open Collective 上：https://opencollective.com/swiper
並查看我們的進階專案
您的支持對我們意義重大！