RhSlider

RhSlider 封裝了 Swiper 11 版的 swiper/vue,輪播項目採用 slot 達到完全客製化,詳細用法見可參考以下範例 Template


RhSlider 有兩種方式傳入 Swiper 設定值:

  1. 1. (推薦,因為有 type check)透過 props 的 options
  2. 2. 像 Swiper 一樣,將該設定值作為 attrs 放在 RhSlider 傳下去

需注意優先度最高的是 options,而非 attrs


預設引入 Swiper 中的 Pagination Scrollbar FreeMode Lazy 模組


預設已調整 Scrollbar 樣式,並增加一個控制項 customNavigation 以顯示客製後的左右指示器;指示器之所以需要完全客製是因為想讓其可超出 Swiper 容器範圍


Swiper 本身雖有支援 RWD 斷點偵測,但為了 server side 不跑版,需改用 @nuxtjs/device 偵測裝置;

因此,若要測試斷點設定,請重新整理確認 server side 有無跑版。

若要測試 Tablet 裝置,需在 Chrome devtools 選擇 iPad series 才會正常偵測。

基礎用法

僅需傳入輪播項目之陣列,無需傳入其他屬性


斷點設定請見右側 Options

Tablet / Desktop: 左右控制器會超出容器,點擊、拖拉後觸發整頁切換;到首頁 / 末頁後控制器隱藏

Mobile: 出現 scrollbar、左右控制器將會隱藏;切換頁面方式改為任意滑動不會定住

test

Slide Item Slide Item Slide Item Slide Item Slide Item Slide Item

test

Slide Item Slide Item Slide Item Slide Item Slide Item Slide Item

test

Slide Item Slide Item Slide Item Slide Item Slide Item Slide Item

test

Slide Item Slide Item Slide Item Slide Item Slide Item Slide Item

test

Slide Item Slide Item Slide Item Slide Item Slide Item Slide Item

test

Slide Item Slide Item Slide Item Slide Item Slide Item Slide Item

test

Slide Item Slide Item Slide Item Slide Item Slide Item Slide Item

test

Slide Item Slide Item Slide Item Slide Item Slide Item Slide Item

test

Slide Item Slide Item Slide Item Slide Item Slide Item Slide Item

test

Slide Item Slide Item Slide Item Slide Item Slide Item Slide Item

test

Slide Item Slide Item Slide Item Slide Item Slide Item Slide Item

test

Slide Item Slide Item Slide Item Slide Item Slide Item Slide Item

test

Slide Item Slide Item Slide Item Slide Item Slide Item Slide Item

test

Slide Item Slide Item Slide Item Slide Item Slide Item Slide Item

test

Slide Item Slide Item Slide Item Slide Item Slide Item Slide Item

test

Slide Item Slide Item Slide Item Slide Item Slide Item Slide Item

test

Slide Item Slide Item Slide Item Slide Item Slide Item Slide Item

test

Slide Item Slide Item Slide Item Slide Item Slide Item Slide Item

test

Slide Item Slide Item Slide Item Slide Item Slide Item Slide Item

test

Slide Item Slide Item Slide Item Slide Item Slide Item Slide Item

test

Slide Item Slide Item Slide Item Slide Item Slide Item Slide Item

test

Slide Item Slide Item Slide Item Slide Item Slide Item Slide Item

test

Slide Item Slide Item Slide Item Slide Item Slide Item Slide Item

test

Slide Item Slide Item Slide Item Slide Item Slide Item Slide Item

Tablet / Mobile 輪播項目出界

overflow 設為 true 即可

同時,隱藏左右控制器,並開啟 freeMode

僅支援 Tablet / Mobile

Slide Item Slide Item Slide Item Slide Item Slide Item Slide Item

I'm Lam. I'm Lam. I'm Lam.

Slide Item Slide Item Slide Item Slide Item Slide Item Slide Item

I'm Lam. I'm Lam. I'm Lam.

Slide Item Slide Item Slide Item Slide Item Slide Item Slide Item

I'm Lam. I'm Lam. I'm Lam.

Slide Item Slide Item Slide Item Slide Item Slide Item Slide Item

I'm Lam. I'm Lam. I'm Lam.

Slide Item Slide Item Slide Item Slide Item Slide Item Slide Item

I'm Lam. I'm Lam. I'm Lam.

Slide Item Slide Item Slide Item Slide Item Slide Item Slide Item

I'm Lam. I'm Lam. I'm Lam.

Slide Item Slide Item Slide Item Slide Item Slide Item Slide Item

I'm Lam. I'm Lam. I'm Lam.

Slide Item Slide Item Slide Item Slide Item Slide Item Slide Item

I'm Lam. I'm Lam. I'm Lam.

Slide Item Slide Item Slide Item Slide Item Slide Item Slide Item

I'm Lam. I'm Lam. I'm Lam.

Slide Item Slide Item Slide Item Slide Item Slide Item Slide Item

I'm Lam. I'm Lam. I'm Lam.

Slide Item Slide Item Slide Item Slide Item Slide Item Slide Item

I'm Lam. I'm Lam. I'm Lam.

Slide Item Slide Item Slide Item Slide Item Slide Item Slide Item

I'm Lam. I'm Lam. I'm Lam.

Slide Item Slide Item Slide Item Slide Item Slide Item Slide Item

I'm Lam. I'm Lam. I'm Lam.

Slide Item Slide Item Slide Item Slide Item Slide Item Slide Item

I'm Lam. I'm Lam. I'm Lam.

Slide Item Slide Item Slide Item Slide Item Slide Item Slide Item

I'm Lam. I'm Lam. I'm Lam.

Slide Item Slide Item Slide Item Slide Item Slide Item Slide Item

I'm Lam. I'm Lam. I'm Lam.

Slide Item Slide Item Slide Item Slide Item Slide Item Slide Item

I'm Lam. I'm Lam. I'm Lam.

Slide Item Slide Item Slide Item Slide Item Slide Item Slide Item

I'm Lam. I'm Lam. I'm Lam.

Slide Item Slide Item Slide Item Slide Item Slide Item Slide Item

I'm Lam. I'm Lam. I'm Lam.

Slide Item Slide Item Slide Item Slide Item Slide Item Slide Item

I'm Lam. I'm Lam. I'm Lam.

Slide Item Slide Item Slide Item Slide Item Slide Item Slide Item

I'm Lam. I'm Lam. I'm Lam.

Slide Item Slide Item Slide Item Slide Item Slide Item Slide Item

I'm Lam. I'm Lam. I'm Lam.

Slide Item Slide Item Slide Item Slide Item Slide Item Slide Item

I'm Lam. I'm Lam. I'm Lam.

Slide Item Slide Item Slide Item Slide Item Slide Item Slide Item

I'm Lam. I'm Lam. I'm Lam.

客製化 scrollbar, 控制器樣式 | 圖片 lazy load

客製 scrollbar 需傳入完整的 swiper.scrollbarOptions

Desktop 若要顯示 scrollbar,需在對應 breakpoint 傳入 enabled

而客製控制器樣式則需使用命名插槽 template#navs 自訂其功能及樣式


圖片 lazy load 位置還有點怪怪,會再調整

Slide Item Slide Item Slide Item Slide Item Slide Item Slide Item

Slide Item Slide Item Slide Item Slide Item Slide Item Slide Item

Slide Item Slide Item Slide Item Slide Item Slide Item Slide Item

Slide Item Slide Item Slide Item Slide Item Slide Item Slide Item

Slide Item Slide Item Slide Item Slide Item Slide Item Slide Item

Slide Item Slide Item Slide Item Slide Item Slide Item Slide Item

Slide Item Slide Item Slide Item Slide Item Slide Item Slide Item

Slide Item Slide Item Slide Item Slide Item Slide Item Slide Item

Slide Item Slide Item Slide Item Slide Item Slide Item Slide Item

Slide Item Slide Item Slide Item Slide Item Slide Item Slide Item

Slide Item Slide Item Slide Item Slide Item Slide Item Slide Item

Slide Item Slide Item Slide Item Slide Item Slide Item Slide Item

Slide Item Slide Item Slide Item Slide Item Slide Item Slide Item

Slide Item Slide Item Slide Item Slide Item Slide Item Slide Item

Slide Item Slide Item Slide Item Slide Item Slide Item Slide Item

Slide Item Slide Item Slide Item Slide Item Slide Item Slide Item

Slide Item Slide Item Slide Item Slide Item Slide Item Slide Item

Slide Item Slide Item Slide Item Slide Item Slide Item Slide Item

Slide Item Slide Item Slide Item Slide Item Slide Item Slide Item

Slide Item Slide Item Slide Item Slide Item Slide Item Slide Item

Slide Item Slide Item Slide Item Slide Item Slide Item Slide Item

Slide Item Slide Item Slide Item Slide Item Slide Item Slide Item

Slide Item Slide Item Slide Item Slide Item Slide Item Slide Item

Slide Item Slide Item Slide Item Slide Item Slide Item Slide Item

Prev
Next

引入額外模組;取消預設斷點設定

除預設的 Pagination Scrollbar FreeMode Lazy ,也能傳入其他 Swiper Modules

此處以 EffectFade 為例


由於此特效僅會出現一個輪播項目,故需取消預設的斷點設定(設為 null

覆蓋 Mobile 預設行為(控制器、freeMode)

Mobile 預設會隱藏 custom navigation 並開啟 freeMode

可藉由 options 及 props 覆寫設定,讓所有裝置統一版面


# 記得用手機測!

輪播項目數不足時

Tablet / Desktop 因項目數 <= slidesPerView,故不會動

Slide Item Slide Item Slide Item Slide Item Slide Item Slide Item

Slide Item Slide Item Slide Item Slide Item Slide Item Slide Item

Slide Item Slide Item Slide Item Slide Item Slide Item Slide Item

Slide Item Slide Item Slide Item Slide Item Slide Item Slide Item

擴充斷點設定

傳入 breakpoints 會合併預設值,傳入值優先生效


需注意 server side 目前僅判斷裝置,若客製 breakpoints < 768> 1080 時會有 CLS 問題

Slide Item Slide Item Slide Item Slide Item Slide Item Slide Item

Slide Item Slide Item Slide Item Slide Item Slide Item Slide Item

Slide Item Slide Item Slide Item Slide Item Slide Item Slide Item

Slide Item Slide Item Slide Item Slide Item Slide Item Slide Item

Slide Item Slide Item Slide Item Slide Item Slide Item Slide Item

Slide Item Slide Item Slide Item Slide Item Slide Item Slide Item

Slide Item Slide Item Slide Item Slide Item Slide Item Slide Item

Slide Item Slide Item Slide Item Slide Item Slide Item Slide Item

Slide Item Slide Item Slide Item Slide Item Slide Item Slide Item

Slide Item Slide Item Slide Item Slide Item Slide Item Slide Item

Slide Item Slide Item Slide Item Slide Item Slide Item Slide Item

Slide Item Slide Item Slide Item Slide Item Slide Item Slide Item

Slide Item Slide Item Slide Item Slide Item Slide Item Slide Item

Slide Item Slide Item Slide Item Slide Item Slide Item Slide Item

Slide Item Slide Item Slide Item Slide Item Slide Item Slide Item

Slide Item Slide Item Slide Item Slide Item Slide Item Slide Item

Slide Item Slide Item Slide Item Slide Item Slide Item Slide Item

Slide Item Slide Item Slide Item Slide Item Slide Item Slide Item

Slide Item Slide Item Slide Item Slide Item Slide Item Slide Item

Slide Item Slide Item Slide Item Slide Item Slide Item Slide Item

Slide Item Slide Item Slide Item Slide Item Slide Item Slide Item

Slide Item Slide Item Slide Item Slide Item Slide Item Slide Item

Slide Item Slide Item Slide Item Slide Item Slide Item Slide Item

Slide Item Slide Item Slide Item Slide Item Slide Item Slide Item

Grid

雖然 Swiper 本身有提供 gird 功能,但可調整參數過少,所以目前需要用到 grid 時,自己先 chunk 後,再在 slide 裡面自己寫 grid 會比較容易實作。


另外一點是,當初在 import gird modules 時都沒辦法正常 import,就先不試了。如果之後有人 import 成功,記得這邊也改一下

Loop 模式

傳入 { loop: true } 以啟用。

需注意以下幾點:

  1. 1. 當 data.length % slidesPerView 不為 0 時(不為倍數)
  2. 2. 當 data.length % slidesPerGroup 不為 0 時(不為倍數)

需要手動複製一至多份的 data。官方文件雖然有提供 { loopAdditionalSlides: number },但實際測試沒辦法解決空白 slide 問題,看起來僅是 preload slide,讓載入速度快一點,


Swiper v9 以上,loop 加上 centeredSlides 會出現最後一個 slide 缺失的問題,須自行複製 slides 以滿足 loop 至少需要的 slideCount.

Issue link: https://github.com/nolimits4web/swiper/issues/7239

test

Slide Item Slide Item Slide Item Slide Item Slide Item Slide Item

test

Slide Item Slide Item Slide Item Slide Item Slide Item Slide Item

test

Slide Item Slide Item Slide Item Slide Item Slide Item Slide Item

test

Slide Item Slide Item Slide Item Slide Item Slide Item Slide Item

test

Slide Item Slide Item Slide Item Slide Item Slide Item Slide Item

test

Slide Item Slide Item Slide Item Slide Item Slide Item Slide Item

test

Slide Item Slide Item Slide Item Slide Item Slide Item Slide Item

test

Slide Item Slide Item Slide Item Slide Item Slide Item Slide Item

test

Slide Item Slide Item Slide Item Slide Item Slide Item Slide Item

test

Slide Item Slide Item Slide Item Slide Item Slide Item Slide Item

test

Slide Item Slide Item Slide Item Slide Item Slide Item Slide Item

test

Slide Item Slide Item Slide Item Slide Item Slide Item Slide Item

test

Slide Item Slide Item Slide Item Slide Item Slide Item Slide Item

test

Slide Item Slide Item Slide Item Slide Item Slide Item Slide Item

test

Slide Item Slide Item Slide Item Slide Item Slide Item Slide Item

test

Slide Item Slide Item Slide Item Slide Item Slide Item Slide Item

test

Slide Item Slide Item Slide Item Slide Item Slide Item Slide Item

test

Slide Item Slide Item Slide Item Slide Item Slide Item Slide Item

test

Slide Item Slide Item Slide Item Slide Item Slide Item Slide Item

test

Slide Item Slide Item Slide Item Slide Item Slide Item Slide Item

test

Slide Item Slide Item Slide Item Slide Item Slide Item Slide Item

test

Slide Item Slide Item Slide Item Slide Item Slide Item Slide Item

test

Slide Item Slide Item Slide Item Slide Item Slide Item Slide Item

test

Slide Item Slide Item Slide Item Slide Item Slide Item Slide Item

test

Slide Item Slide Item Slide Item Slide Item Slide Item Slide Item

test

Slide Item Slide Item Slide Item Slide Item Slide Item Slide Item

test

Slide Item Slide Item Slide Item Slide Item Slide Item Slide Item

test

Slide Item Slide Item Slide Item Slide Item Slide Item Slide Item

test

Slide Item Slide Item Slide Item Slide Item Slide Item Slide Item

test

Slide Item Slide Item Slide Item Slide Item Slide Item Slide Item

test

Slide Item Slide Item Slide Item Slide Item Slide Item Slide Item

test

Slide Item Slide Item Slide Item Slide Item Slide Item Slide Item

test

Slide Item Slide Item Slide Item Slide Item Slide Item Slide Item

test

Slide Item Slide Item Slide Item Slide Item Slide Item Slide Item

test

Slide Item Slide Item Slide Item Slide Item Slide Item Slide Item

test

Slide Item Slide Item Slide Item Slide Item Slide Item Slide Item

test

Slide Item Slide Item Slide Item Slide Item Slide Item Slide Item

test

Slide Item Slide Item Slide Item Slide Item Slide Item Slide Item

test

Slide Item Slide Item Slide Item Slide Item Slide Item Slide Item

test

Slide Item Slide Item Slide Item Slide Item Slide Item Slide Item

test

Slide Item Slide Item Slide Item Slide Item Slide Item Slide Item

test

Slide Item Slide Item Slide Item Slide Item Slide Item Slide Item

test

Slide Item Slide Item Slide Item Slide Item Slide Item Slide Item

test

Slide Item Slide Item Slide Item Slide Item Slide Item Slide Item

test

Slide Item Slide Item Slide Item Slide Item Slide Item Slide Item

test

Slide Item Slide Item Slide Item Slide Item Slide Item Slide Item