Swiper

Cập nhật lần cuối: 27/05/2022

Bắt đầu hỗ trợ ở phiên bản:

• zmp-ui: 1.7.0

Swiper component: Component giúp tạo giao diện slider, thường sử dụng hiển thị một nhóm nội dung dạng slider như banner,...

Properties

Swiper

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.
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.
ref	RefObject		Tham chiếu đến instance của Swiper.

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.

Swiper.Slide

Name	Type	Default	Description
children	React.ReactNode		Nội dung cần được hiển thị trong slide.
className	string		CSS class của slide.
style	CSSProperties		Inline style của slide.

Example

Swiper Mặc định

Open Sandbox

import React from "react";
import { Page, Swiper, Box, Text } from "zmp-ui";

export default function HomePage() {
  return (
    <Page className="section-container">
      <Text.Title size="small">Swiper</Text.Title>
      <Box
        mt={6}
        flex
        flexDirection="column"
        justifyContent="center"
        alignItems="center"
      >
        <Swiper>
          <Swiper.Slide>
            <img
              className="slide-img"
              src="https://stc-zmp.zadn.vn/zmp-zaui/images/0e05d63a7a93a6cdff826.jpg"
              alt="slide-1"
            />
          </Swiper.Slide>
          <Swiper.Slide>
            <img
              className="slide-img"
              src="https://stc-zmp.zadn.vn/zmp-zaui/images/0f7c061caab576eb2fa45.jpg"
              alt="slide-2"
            />
          </Swiper.Slide>
          <Swiper.Slide>
            <img
              className="slide-img"
              src="https://stc-zmp.zadn.vn/zmp-zaui/images/321fb45f18f6c4a89de78.jpg"
              alt="slide-3"
            />
          </Swiper.Slide>
          <Swiper.Slide>
            <img
              className="slide-img"
              src="https://stc-zmp.zadn.vn/zmp-zaui/images/4f417921d58809d650997.jpg"
              alt="slide-4"
            />
          </Swiper.Slide>
          <Swiper.Slide>
            <img
              className="slide-img"
              src="https://stc-zmp.zadn.vn/zmp-zaui/images/677fad2e0187ddd984969.jpg"
              alt="slide-5"
            />
          </Swiper.Slide>
        </Swiper>
      </Box>
    </Page>
  );
}

Example

Swiper autoplay

Open Sandbox

import React from "react";
import { Page, Swiper, Box, Text } from "zmp-ui";

export default function HomePage() {
  return (
    <Page className="section-container">
      <Text.Title size="small">Swiper</Text.Title>
      <Box
        mt={6}
        flex
        flexDirection="column"
        justifyContent="center"
        alignItems="center"
      >
        <Swiper autoplay duration={2000} loop>
          <Swiper.Slide>
            <img
              className="slide-img"
              src="https://stc-zmp.zadn.vn/zmp-zaui/images/0e05d63a7a93a6cdff826.jpg"
              alt="slide-1"
            />
          </Swiper.Slide>
          <Swiper.Slide>
            <img
              className="slide-img"
              src="https://stc-zmp.zadn.vn/zmp-zaui/images/0f7c061caab576eb2fa45.jpg"
              alt="slide-2"
            />
          </Swiper.Slide>
          <Swiper.Slide>
            <img
              className="slide-img"
              src="https://stc-zmp.zadn.vn/zmp-zaui/images/321fb45f18f6c4a89de78.jpg"
              alt="slide-3"
            />
          </Swiper.Slide>
          <Swiper.Slide>
            <img
              className="slide-img"
              src="https://stc-zmp.zadn.vn/zmp-zaui/images/4f417921d58809d650997.jpg"
              alt="slide-4"
            />
          </Swiper.Slide>
          <Swiper.Slide>
            <img
              className="slide-img"
              src="https://stc-zmp.zadn.vn/zmp-zaui/images/677fad2e0187ddd984969.jpg"
              alt="slide-5"
            />
          </Swiper.Slide>
        </Swiper>
      </Box>
    </Page>
  );
}