2. Algorithm
  3. javascript - How to turn off autoplay for React Bootstrap Carousel? - Stack Overflow

javascript - How to turn off autoplay for React Bootstrap Carousel? - Stack Overflow

admin2025-04-03  0

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
Share Improve this question asked Feb 8, 2021 at 23:26 Tabitha PerryTabitha Perry 311 silver badge2 bronze badges
Add a ment  | 

4 Answers 4

Reset to default 12

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>
转载请注明原文地址:http://conceptsofalgorithm.com/Algorithm/1743622007a213699.html

javascriptHow to turn off autoplay for React Bootstrap CarouselStack Overflow

最新回复(0)