Chuyển tới nội dung chính

Swiper

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

PropertyTypeRequiredDescription
autoplaybooleanNoThiết lập cơ chế tự động chuyển slide. (default: false)
afterChange(currentIndex: number) => voidNoCallback được sau khi slider đã chuyển đến slide mới.
defaultActivenumberNoIndex của slide bắt đầu khi slider được render.
dotsbooleanNoHiển thị các chấm chuyển slide ở phía dưới slider. (default: true)
childrenReact.ReactNodeNoChứa các `` component.
loopbooleanNoThiế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. (default: false)
durationnumberNoThờ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`.
disableSwipebooleanNoTắt cơ chế chuyển slide khi vuốt trên thiết bị di động. (default: false)

SwiperRefObject

PropertyTypeRequiredDescription
activeIndexnumberNoIndex của slide hiện tại.
goTo(slideIndex: number) => voidNoChuyển đến một slide cụ thể.
next() => voidNoChuyển đến slide tiếp theo.
prev() => voidNoQuay lại slide phía trước.

SwiperSlideProps

PropertyTypeRequiredDescription
childrenReact.ReactNodeNoNội dung cần được hiển thị trong slide.