chakra + react-responsive-carousel 示例

App.tsx

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

import "react-responsive-carousel/lib/styles/carousel.min.css";
import { Carousel } from 'react-responsive-carousel';

export const App = () => (
  <ChakraProvider theme={theme}>
      <Carousel infiniteLoop useKeyboardArrows autoPlay autoFocus showThumbs={false}>
          <Item index={1} />
          <Item index={2} />
          <Item index={3} />
      </Carousel>
  </ChakraProvider>
)

index.tsx

import * as React from "react"
import * as ReactDOM from "react-dom/client"
import { App } from "./App"

const container = document.getElementById("root")
if (!container) throw new Error('Failed to find the root element');
const root = ReactDOM.createRoot(container)

root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
)

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

关于无限循环的问题 ，可以暂时在 package.json 中将版本号修改为如下：

"react-responsive-carousel": "3.2.21"