Swiper 是一個功能豐富且流行的 JavaScript 輪播插件,廣泛應用於網站和行動應用程式的圖片輪播、幻燈片和滑塊展示。它提供了豐富的配置選項和自定義功能,非常容易擴充,不僅如此還有完整的Example,可讓開發者快速開始輕鬆創建出優雅且互動性強的輪播效果。
為何要加入燈箱功能
在很多使用場景下,只有輪播功能可能無法完全滿足需求,特別是當用戶想要更專注地放大圖片並細看細節時,我發現 Swiper 沒有預設這樣的功能,所以在這樣的情況下,將 Lightbox(燈箱)功能加入 Swiper 是一個明智的選擇。Lightbox 是一種常見的互動式圖片展示方式,它可以讓用戶單擊圖片時在一個彈出視窗中放大圖片,以提供更好的使用者體驗。這種結合可以為用戶提供更大的圖片展示空間,更方便地觀看圖片細節,並增加了互動性和使用便利性。
如何合併燈箱功能
這部分我已經實作在CodePen上,有興趣的可以參考下列程式碼,並可以直接在codePen上看執行結果,這樣最快
See the Pen Untitled by VECTOR.cool 威得數位 (@ann71727) on CodePen.