Custom Swiper Test

Custom Carousel Component Demo

Testing custom touch-enabled carousel component

Basic Swipe

Use finger or mouse to drag and switch slides

Current Slide: 1 / 3

1

Slide 1

This is the content of the first slide

2

Slide 2

This is the content of the second slide

3

Slide 3

This is the content of the third slide

Navigation Buttons

Use hasNavigation prop to enable left/right navigation buttons

Current Slide: 1 / 4

1

Red

2

Green

3

Blue

4

Purple

Event Handling

Listen to change, sliderMove, sliderMoveEnd and other events

Current Slide: 1 / 3

Last Event: -

<

>

1

Slide 1

2

Slide 2

3

Slide 3

Event Log

Swipe Ratio Adjustment

Use longSwipesRatio to adjust the swipe distance required to switch slides

<

>

1

Page 1

Try different swipe distances

2

Page 2

Try different swipe distances

3

Page 3

Try different swipe distances

Multi-position Slots

Supports top, left, center, right, bottom five slot positions

<

>

Top Slot (1)
Left
1

Slide 1

Center Area

Right
Bottom Slot (1)
Top Slot (2)
Left
2

Slide 2

Center Area

Right
Bottom Slot (2)
Top Slot (3)
Left
3

Slide 3

Center Area

Right
Bottom Slot (3)

© 2026 Parker Chen 的Nuxt實驗室. All rights reserved.