Swiper

Cập nhật lần cuối: 16/04/2025

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

Name	Type	Default	Description
afterChange	(currentIndex: number) => void		Callback được sau khi slider đã chuyển đến slide mới.
autoplay	boolean	false	Thiết lập cơ chế tự động chuyển slide.
children	React.ReactNode		Chứa các <Swiper.Slide /> component.
defaultActive	number		Index của slide bắt đầu khi slider được render.
disableSwipe	boolean	false	Tắt cơ chế chuyển slide khi vuốt trên thiết bị di động.
dots	boolean	true	Hiển thị các chấm chuyển slide ở phía dưới slider.
duration	number		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.
loop	boolean	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.

SwiperRefObject

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

SwiperSlideProps

Name	Type	Default	Description
children	React.ReactNode		Nội dung cần được hiển thị trong slide.