自製 Swiper 測試

自製輪播圖組件展示

測試自製觸控滑動輪播圖組件

基本滑動

使用手指或滑鼠拖動切換幻燈片

當前幻燈片: 1 / 3

1

幻燈片 1

這是第一個幻燈片的內容

2

幻燈片 2

這是第二個幻燈片的內容

3

幻燈片 3

這是第三個幻燈片的內容

導航按鈕

使用 hasNavigation 屬性啟用左右導航按鈕

當前幻燈片: 1 / 4

1

紅色

2

綠色

3

藍色

4

紫色

事件處理

監聽 change、sliderMove、sliderMoveEnd 等事件

當前幻燈片: 1 / 3

最後事件: -

<

>

1

Slide 1

2

Slide 2

3

Slide 3

事件日誌

滑動比例調整

使用 longSwipesRatio 調整切換所需的滑動距離比例

longSwipesRatio: 0.2

<

>

1

Page 1

嘗試不同的滑動距離

2

Page 2

嘗試不同的滑動距離

3

Page 3

嘗試不同的滑動距離

多位置插槽

支援 top、left、center、right、bottom 五個位置的插槽

<

>

頂部插槽 (1)

左側

1

幻燈片 1

中心區域

右側

底部插槽 (1)

頂部插槽 (2)

左側

2

幻燈片 2

中心區域

右側

底部插槽 (2)

頂部插槽 (3)

左側

3

幻燈片 3

中心區域

右側

底部插槽 (3)