# Swiper

- Page: https://jiguang132.com/resources/ant-design-mobile/docs/swiper
- Resource: Ant Design Mobile (https://jiguang132.com/resources/ant-design-mobile.md)
- All guides: https://jiguang132.com/resources/ant-design-mobile/docs.md

A set of rotating areas.

## Install

```bash
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](/components/page-indicator) `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 |

```ts
type PropagationEvent = 'mouseup' | 'mousemove' | 'mousedown'
```

```ts
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` | - |

---

Index of all JGuang resources: https://jiguang132.com/llms.txt