Swiper
A set of rotating areas.
Install
npm install antd-mobile@5.43.0
antd-mobile is for mobile web, not React Native or Mini Programs. React 19 projects must register createRoot with unstableSetRender at the entry, or imperative APIs such as Toast and Dialog cannot render. Switch dark mode with <html data-prefers-color-scheme="dark">.
Examples come from the official Ant Design Mobile repository (MIT) at the commit published as npm 5.43.0. Presentation helpers such as DemoBlock are JGuang rewrites, not antd-mobile APIs.
A set of rotating areas.
When to Use
- When there is a set of flat content.
- When the content space is insufficient, it can be stored in the form of a revolving lantern for carousel display.
- Often used for a set of images or card carousels.
Demos
Basic Usage
Slides which are not full-width
Indicators
Full Page Guide
Vertical
When you use a vertical Swiper, be sure to set its height through the --height CSS variable, otherwise the Swiper will display abnormally.
Virtual Scroll
Use total with renderProps for render. Not support loop
Swiper
Props
| Name | Description | Type | Default | Version |
|---|---|---|---|---|
| allowTouchMove | Whether to allow gesture sliding | boolean | true | |
| autoplay | Whether to switch automatically | boolean | false | |
| autoplayInterval | Automatic switching interval, the unit is ms | number | 3000 | |
| defaultIndex | The initial position | number | 0 | |
| direction | Layout direction | 'horizontal' | 'vertical' | 'horizontal' | |
| indicator | Render a customized indicator | (total: number, current: number) => ReactNode | - | |
| indicatorProps | Related attributes of the indicator | support PageIndicator color style className prop | - | |
| loop | Whether to loop | boolean | false | |
| onIndexChange | Triggered on index is changed | (index: number, info: { source: SwiperIndexChangeSource }) => void | - | |
| rubberband | Whether to enable the rubberband effect. | boolean | true | |
| slideSize | The slide width in percentage | number | 100 | |
| stuckAtBoundary | Whether to stuck at boundary in order to prevent white spaces. Only available when loop is false and slideWidth < 100. | boolean | true | |
| trackOffset | The track offset in percentage | number | 0 | |
| total | Virtual scroll config total size which should work with renderProps. (Not support loop) | number | 5.34.0 | |
| stopPropagation | Stop the propagation of some events. | PropagationEvent[] | [] | 5.28.0 |
type PropagationEvent = 'mouseup' | 'mousemove' | 'mousedown'
type SwiperIndexChangeSource = 'auto' | 'swipe' | 'resize'
CSS Variables
| Name | Description | Default |
|---|---|---|
| --border-radius | rounded corners of the overall component | 0 |
| --height | height | auto |
| --track-padding | padding in the track area | 0 |
| --width | width | 100% |
Ref
| Name | Description | Type |
|---|---|---|
| swipeNext | Switch to the next one | () => void |
| swipePrev | Switch to the previous one | () => void |
| swipeTo | Switch to the specified index | (index: number) => void |
Swiper.Item
Props
| Name | Description | Type | Default |
|---|---|---|---|
| onClick | Triggered when the slider is clicked | (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void | - |