reactjs - How to change this carousel from auto fade to auto slide

Question

I am using this carousel for my react app. It's working fine. It's using auto fade effect but I want to change it to auto slide. How can I do that?

How to change this carousel from auto fade to auto slide. It's fading at interval="5000".

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

标签： reactjscarousel