---
sourceType: official-guide
sourceTypeMatchedRule: fallback
slug: MA/zaui/display/Swiper
title: Swiper
---
```ts
import { Swiper } from "zmp-ui";
```


Dùng để hiển thị nhiều hình ảnh dưới dạng trượt ngang như banner, carousel,...

## Ví dụ



## Bảng thuộc tính


### SwiperProps

| Tên | Type | Required | Default | Mô tả |
| --- | --- | --- | --- | --- |
| autoplay | boolean | No | false | Thiết lập cơ chế tự động chuyển slide. |
| afterChange | (currentIndex: number) => void | No |  | Callback được sau khi slider đã chuyển đến slide mới. |
| defaultActive | number | No |  | Index của slide bắt đầu khi slider được render. |
| dots | boolean | No | true | Hiển thị các chấm chuyển slide ở phía dưới slider. |
| children | React.ReactNode | No |  | Chứa các `` component. |
| loop | boolean | No | false | Thiết lập cơ chế lặp lại các slide. Sau khi chuyển đến slide cuối cùng, slider sẽ quay lại slide đầu tiên. |
| duration | number | No |  | Thời gian tự động chuyển giữa các slide (đơn vị: "ms"). Cần được sử dụng kết hợp với `autoplay`. |
| disableSwipe | boolean | No | false | Tắt cơ chế chuyển slide khi vuốt trên thiết bị di động. |

### SwiperRefObject

| Tên | Type | Required | Default | Mô tả |
| --- | --- | --- | --- | --- |
| activeIndex | number | No |  | Index của slide hiện tại. |
| goTo | (slideIndex: number) => void | No |  | Chuyển đến một slide cụ thể. |
| next | () => void | No |  | Chuyển đến slide tiếp theo. |
| prev | () => void | No |  | Quay lại slide phía trước. |

### SwiperSlideProps

| Tên | Type | Required | Default | Mô tả |
| --- | --- | --- | --- | --- |
| children | React.ReactNode | No |  | Nội dung cần được hiển thị trong slide. |