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!

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!

• javascript
• reactjs
• bootstrap-4
• react-bootstrap

4 Answers 4

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}

interval={null}

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

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

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>