React Card Carousel with no autoplay-CodePudding

I've been working with React Card Carousel. I've done a page with a card carousel, but I cannot figure out how to not autoplay the cards and find a way for the user to change them.

This is the code.

const candidates = [
    {img: Verde, semestre: 'Formula presi/vice', names: 'P1 y P2', description: 'Hola somos ...'},
    {img: Verde, semestre: 'Primer Semestre', names: 'S1', description: 'Hola soy ...'},
    {img: Verde, semestre: 'Segundo Semestre', names: 'S2', description: 'Hola soy ...'},
    {img: Verde, semestre: 'Tercer Semestre', names: 'S3', description: 'Hola soy ...'},
    {img: Verde, semestre: 'Cuarto Semestre', names: 'S4', description: 'Hola soy ...'},
    {img: Verde, semestre: 'Quinto Semestre', names: 'S5', description: 'Hola soy ...'},
    {img: Verde, semestre: 'Sexto Semestre', names: 'S6', description: 'Hola soy ...'},
    {img: Verde, semestre: 'Septimo Semestre', names: 'S7', description: 'Hola soy ...'},
    {img: Verde, semestre: 'Octavo Semestre', names: 'S8', description: 'Hola soy ...'}
];

const ImageSlider = () => {
    return(
        <>
            <NavB />
            <ReactCardCarousel autoplay={true} autoplay_speed={4500}>
                 {candidates.map((slide, index)=>{
                    return(
                    <div>
                        <Candidate data={slide} />
                    </div>)
                })}
            </ReactCardCarousel>
    
        </>
    )
}

Where the Candidate component is the next one:

import {
  MDBCard,
  MDBCardTitle,
  MDBCardText,
  MDBCardBody,
  MDBCardImage,
  MDBRow,
  MDBCol
} from 'mdb-react-ui-kit';

const Candidate = ({data}) => {
    return (
        <MDBCard style={{width: '500px', height:'300px'}}>
            <MDBRow className='g-0'>
                <MDBCol md='4'>
                <MDBCardImage src={data.img} alt='...' fluid />
                </MDBCol>
                <MDBCol md='8'>
                <MDBCardBody>
                    <MDBCardTitle>{data.names} {data.semestre}</MDBCardTitle>
                    <MDBCardText>
                    {data.description}
                    </MDBCardText>
                </MDBCardBody>
                </MDBCol>
            </MDBRow>
        </MDBCard>
    );
}

I'd really appreciate your help. Thanks in advice :)

CodePudding user response：

One solution would be to have a boolean state(set to false) in the Carousel page and provide a toggle for letting the user change the value.

Currently, you ae setting autoplay to true by default, instead of which pass the newly defined state.

CodePudding user response：

there is props in package that you use content autoplay and autoplay_speed take a look here for more details