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

Question

我正在寻找React/Material-UI库中的图像轮播组件，但我无法在其中找到该组件。请帮我找到图像轮播组件。

- Esmail

Answer 1

我不完全理解你的问题，但我希望这个链接可以帮助你:

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

如果你指的是“旋转木马”，也就是图片轮播，这个库可以帮助你：

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

或者您可以在Material UI库中找到“carousel”：

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

或者编辑您的帖子，或者上传您想要的图片。

- Hiba Youssef

---

我认为你指的是步进器[https://mui.com/material-ui/react-stepper/]。 - codmitu

相同的意思，我修改了答案。 - Hiba Youssef

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/

- codmitu