[指南] Vue 整合最新版本的 Swiper 輪播套件

章節連結

Swiper 可以說是目前最知名的輪播效果的第三方套件了,它並不需要使用 jQuery ,也可以和多種前端框架 ( 如 React, Vue…等) 進行整合。雖說 npm 上頭已有 vue-awesome-swiper 的整合套件,但這回想採用 CDN 的方式引入,順便搭配最新的 Vue 3 來作使用。以下有筆記心得兼採坑過程。
swiper


版本

  1. Swiper:6.3.5
  2. Vue:3.0.3

程式碼

  1. 在 DOM 元素都載入完後,才宣告出一個新的 Swiper Instance。當你使用 Composition API,可以直接在 Vue Instance 內取出 onMounted 做操作
  2. 可使用 Vue 的 nextTick 方法,強迫 Vue 來進行重新渲染的動作。不過這必須要搭配套件本身具有 Update 的功能,如 Swiper Instance 提供的 swiper.update()
  3. swiper-container 外層視情況要加入一層 div,這樣就可以控制 swiper-container 的大小。一般而言,這 div 的寬與高會和 swiper-container 所含的圖片、文字內容是一樣的
  4. 小心 class 的名稱:swiper-container > swiper-wrapper > swiper-slide

Demo

按讚加入粉絲團

延伸閱讀

GA瀏覽人氣:62