Reactjs 如何将此旋转木马从自动淡入淡出更改为自动滑动

我正在为我的react应用程序使用此旋转木马。很好用。它使用自动淡入效果，但我想把它改为自动滑动。我该怎么做

如何将此旋转木马从自动淡入淡出更改为自动滑动。它以间隔=“5000”衰减

从“React”导入React；
从'@material ui/core'导入{createMuiTheme}；
从'@material ui/core'导入{ThemeProvider}；
从'@material ui/core/styles'导入{makeStyles}；
从“反应物料ui转盘”导入转盘；
从“react material ui carousel”导入转盘滑动；
从“@material ui/core/Card”导入卡片；
从“@material ui/core/CardMedia”导入CardMedia；
从“/Images.js/1.jpg”导入image10；
从“/Images.js/2.jpg”导入image11；
从“/Images.js/3.jpg”导入image12；
从“/Images.js/4.jpg”导入image13；
从“/Images.js/5.jpg”导入image14；
const theme=createMuiTheme({
调色板：{
指标：假，
}
})
const useStyles=makeStyles（（主题）=>({
根目录：{
flexGrow:1，
},
按钮：{
“&：悬停”：{
背景色：“fff！重要”，
}
},
标题：{
flexGrow:1，
},
}));
导出默认函数Ani（）{
常量图片=[
{image:image10}，
{image:image11}，
{image:image12}，
{image:image13}，
{image:image14}，
];
const classes=useStyles（）；
返回(
{pictures.map（{image}）=>(
))}
);
}

import React from 'react';
import { createMuiTheme } from '@material-ui/core';
import { ThemeProvider } from '@material-ui/core';
import { makeStyles } from '@material-ui/core/styles';
import Carousel from 'react-material-ui-carousel';
import CarouselSlide from 'react-material-ui-carousel';
import Card from '@material-ui/core/Card';
import CardMedia from '@material-ui/core/CardMedia';


import image10 from "./Images.js/1.jpg";


import image11 from "./Images.js/2.jpg";



import image12 from "./Images.js/3.jpg";


import image13 from "./Images.js/4.jpg";

import image14 from "./Images.js/5.jpg";





const theme = createMuiTheme ({
    palette: {

        indicators: false,


       
    }
})

const useStyles = makeStyles((theme) => ({
    root: {
      flexGrow: 1,
     

    },
    Button: {
        "&:hover": {
            backgroundColor: "#fff !important",
           

          }
    },
    title: {
      flexGrow: 1,
    

    },
}));



export default function Ani (){
    const pictures = [
     
     
      { image: image10 },
      { image: image11 },
      { image: image12 }, 
      { image: image13 },
      { image: image14 },


    
     
     
      


    ];
    const classes = useStyles();

    return (
        <ThemeProvider theme={theme}>
          

            <Carousel  indicators={false}  interval="5000"   orientation="ltr"
  proportion="25"
  infiniteLoop useKeyboardArrows autoPlay  >
                {pictures.map(({image}) => (
                    <CarouselSlide key={image}>
                        <Card dots="false">
                            <CardMedia
                                image={image}
                                style={{
                                    height: 0,
                                    paddingTop: '36%',
                                   

                                }}
                            />

                           
                        </Card>

                        




                    </CarouselSlide>
                ))}









            </Carousel>


        </ThemeProvider>
    );
}