Nhảy tới nội dung
Phiên bản: 1.11.0

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

NameTypeDefaultDescription
autoplaybooleanfalseTự động chuyển slide
defaultActivenumber0Set active mặc định cho slide có index cụ thể
dotsbooleantrueẨn/Hiện thanh indicators mặc định
loopbooleantrueTạo swiper lặp lại các slide/không
durationnumber3000Thời gian tự động chuyển slide khi bật (autoplay)
disableSwipebooleanfalseCho phép swipe để chuyển trang
afterChange(currentIndex: number) => voidcallback function fired sau khi chuyển tới slide mới
refRefObject<SwiperRefObject>Chứa swiper ref object

SwiperRefObject

NameTypeDefaultDescription
activeIndexnumberIndex của slide đang active
goTo(slideIndex: number) => voidChuyển tới slide cụ thể
nextfunctionChuyển đến slide tiếp theo
prevfunctionChuyển đến slide trước đó

Swiper.Slide

NameTypeDefaultDescription
classNamestringThêm class cho slide element
styleCSSPropertiesTuỳ chỉnh style của slide thông qua inline-style
childrenReactNodeNội dung của slide

Example

Swiper Mặc định

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

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>
  );
}