React/Material-UI 库本身有图像轮播组件吗？

Question

我正在 React/Material-UI 库中搜索图像滑块（轮播）组件，但在其中找不到该组件。请帮我找到图像滑块组件。

Answer 1

我不太明白你的问题，但我希望这个链接对你有帮助：

https://mui.com/material-ui/react-slider/

或者如果你的意思是“轮播”，即图片滑块，这个库将帮助你：

https://www.npmjs.com/package/react-material-ui-carousel

或者你可以在Material ui Library中找到“carousel”：

https://mui.com/material-ui/react-stepper/

或编辑您的帖子，或添加您想要的图片

Answer 2

安装依赖项

"react-slick": "^0.28.1",
"slick-carousel": "^1.8.1"

导入组件和样式

import Slider from "react-slick";
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";

const settings = {
   dots: true,
   infinite: true,
   speed: 500,
   slidesToShow: 1,
   slidesToScroll: 1,
   centerMode: true,
   variableWidth: true,
   swipeToSlide: true,
   edgeFriction: 0.15,
};

const App = () => {

 return (
      <Slider {...settings} >
          {[image1, image2, ...].map((image, i) => (
                <Image key={i}
                    id={image}
                    src={image}
                    alt="image" />
           ))}
        </Slider>
 )

http://kenwheeler.github.io/slick/

Answer 3

那已经过时了，我也有错误，所以我必须解决这个问题，所以你需要从 github SwipeableViews.js 下载 react-swipeable-views 并将其添加到 src/react-swipeable-views 文件夹的根目录中或者可能与 npm install --save react-swipeable-views

一起使用

“反应可滑动”：“^7.0.1”，
“react-swipeable-views-react-18-fix”：“^0.14.1”，
“react-swipeable-views-utils”：“^0.14.0”，

import { autoPlay } from 'react-swipeable-views-utils';
import SwipeableViews from '../../../react-swipeable-views'

const AutoPlaySwipeableViews = autoPlay(SwipeableViews);

export default Component = () => {
    const [activeStep, setActiveStep] = useState(0);

    const handleStepChange = (step: number) => {
       setActiveStep(step);
    };

    return (
       <AutoPlaySwipeableViews
           axis={theme.direction === 'rtl' ? 'x-reverse' : 'x'}
           index={activeStep}
           onChangeIndex={handleStepChange}
           enableMouseEvents={false} //or true
           style={{ height: 200 }}
       >
            //array or images
           {images.map((image) => (
                <img src={image)/>
           ))}
       </AutoPlaySwipeableViews>
    )
}

这仅供参考，并不完全完整，我还在 AutoPlaySwipeableViews 下添加了来自 MUI 的 MobileStepper，并为鼠标用户提供了 backButton 和 nextButton 属性
从 '@mui/material' 导入 { MobileStepper }；
“@mui/material”：“^5.15.10”，