chakra + swiper 示例

App.tsx

import * as React from "react"
import {
    ChakraProvider,
    theme,
} from "@chakra-ui/react"

// Import Swiper React components
import { Swiper, SwiperSlide } from "swiper/react";

// Import Swiper styles
import "swiper/css";
import "swiper/css/pagination";
import "swiper/css/navigation";

import "./styles.css";

// import required modules
import { Autoplay, Pagination, Navigation } from "swiper";
import Item from "./Item";

export const App = () => (
    <ChakraProvider theme={theme}>
        <Swiper
            slidesPerView={1}
            spaceBetween={30}
            speed={500} /*速度：单位毫秒*/
            loop={true}  /*循环*/
            autoplay={true}  /*自动播放*/
            pagination={{
                clickable: true,
            }}
            onSlideChangeTransitionStart={(el) => {
                console.log(el)
                console.log(el.realIndex)
            }}
            navigation={true}
            modules={[Autoplay, Pagination, Navigation]}
        >
            <SwiperSlide>
                <Item index={1}/>
            </SwiperSlide>
            <SwiperSlide>
                <Item index={2}/>
            </SwiperSlide>
            <SwiperSlide>
                <Item index={3}/>
            </SwiperSlide>
        </Swiper>
    </ChakraProvider>
)

Item.scss

.container {
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 100vh;
  font-size: 4rem;

  .top {
    height: 150px;
    background-color: beige;
    justify-content: center;
    align-items: center;
    padding: 20px;
    & > div {
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 100%;
      border-radius: .5rem;
      background-color: #6495ed82;
    }
  }

  .bottom {
    flex-grow: 1;
    background-color: #ed143d47;
    padding: 20px;
    gap: 1rem;
    & > div {
      justify-content: center;
      align-items: center;
      border-radius: .5rem;
      flex-grow: 1;
    }

    & > div:nth-child(1){
      background-color: darkkhaki;
    }
    & > div:nth-child(2){
      background-color: darksalmon;
    }
    & > div:nth-child(3){
      background-color: lightblue;
    }
  }

}

Item.tsx

import {Flex} from "@chakra-ui/react";
import * as React from "react";
import './Item.scss';

export default function Item(props:any) {
    return <Flex className={'container'}>
        <Flex className={'top'}>
            <Flex>上 - {props.index}</Flex>
        </Flex>
        <Flex className={'bottom'}>
            <Flex>A - {props.index}</Flex>
            <Flex>B - {props.index}</Flex>
            <Flex>C - {props.index}</Flex>
        </Flex>
    </Flex>
}

styles.css

#root { height: 100vh }

.swiper {
  width: 100%;
  height: 100%;
}

.swiper-slide {
  text-align: center;
  /* Center slide text vertically */
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}

.swiper {
  margin-left: auto;
  margin-right: auto;
}

相关链接：

• https://swiperjs.com/swiper-api
• https://swiperjs.com/react
• https://swiperjs.com/demos