How to turn off autoplay for React Bootstrap Carousel?

user_15172410 0
Viewed 4282

I'm having trouble setting React Bootstrap's Carousel to not autoplay.

This is my code right now:

import React from 'react';
import Carousel from 'react-bootstrap/Carousel';
import pigment1 from '../images/design-images/pigment/page1.jpeg';
import pigment2 from '../images/design-images/pigment/page2.jpg';
import pigment3 from '../images/design-images/pigment/page3.jpg';
import './DesignProjects.css';

function DesignProjects(props) {
    return (
        <section>
            <h2>Design Work</h2>
            <div className='design-project'>
                <h3>Pigment Website Redesign</h3>
                <Carousel interval={false}>
                    <Carousel.Item>
                        <img className='d-block w-100' src={pigment1} alt='First slide' />
                    </Carousel.Item>
                    <Carousel.Item>
                        <img className='d-block w-100' src={pigment2} alt='Third slide' />
                    </Carousel.Item>
                    <Carousel.Item>
                        <img className='d-block w-100' src={pigment3} alt='Third slide' />
                    </Carousel.Item>
                </Carousel>
            </div>
        </section>
    );
}

export default DesignProjects;

From what I read I need to set interval to false... but every way I've attempted to do so has resulted in either getting an error or the Carousel cycling faster through the images. The above is the last way I attempted, but again it's not working, instead it cycles through faster.

Any help would be incredibly appreciated!

react-bootstrap bootstrap-4 reactjs javascript
4 Answers

interval has type number, default 5000

The amount of time to delay between automatically cycling an item. If null, carousel will not automatically cycle.

interval={null}
user_75514810

interval={null}

!!! Figures as soon as I post the question, I stumble onto the solution.

user_151724100

You have passed false to interval in the Carousel. Change it to "interval={number}". Code should be change to as following.

<Carousel interval={6000}> // 6000 = 6 secs 
     <Carousel.Item>
          <img className='d-block w-100' src={pigment1} alt='First slide' />
     </Carousel.Item>
</Carousel>

Bootstrap Carousel

user_50553730

You can use interval = {null} inside the Carousel tag. That will do the trick

<section>
            <h2>Design Work</h2>
            <div className='design-project'>
                <h3>Pigment Website Redesign</h3>
                <Carousel interval={null}>
                    <Carousel.Item>
                        <img className='d-block w-100' src={pigment1} alt='First slide' />
                    </Carousel.Item>
                    <Carousel.Item>
                        <img className='d-block w-100' src={pigment2} alt='Third slide' />
                    </Carousel.Item>
                    <Carousel.Item>
                        <img className='d-block w-100' src={pigment3} alt='Third slide' />
                    </Carousel.Item>
                </Carousel>
            </div>
        </section>
user_168536220
Related