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
autoplay	boolean	false	Tự động chuyển slide
defaultActive	number	0	Set active mặc định cho slide có index cụ thể
dots	boolean	true	Ẩn/Hiện thanh indicators mặc định
loop	boolean	true	Tạo swiper lặp lại các slide/không
duration	number	3000	Thời gian tự động chuyển slide khi bật (autoplay)
disableSwipe	boolean	false	Cho phép swipe để chuyển trang
afterChange	(currentIndex: number) => void		callback function fired sau khi chuyển tới slide mới
ref	RefObject<SwiperRefObject>		Chứa swiper ref object

SwiperRefObject

Name	Type	Default	Description
activeIndex	number		Index của slide đang active
goTo	(slideIndex: number) => void		Chuyển tới slide cụ thể
next	function		Chuyển đến slide tiếp theo
prev	function		Chuyển đến slide trước đó

Swiper.Slide

Name	Type	Default	Description
className	string		Thêm class cho slide element
style	CSSProperties		Tuỳ chỉnh style của slide thông qua inline-style
children	ReactNode		Nội dung 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>
  );
}