React-Bootstrap Carousel Individual Item Intervals

React-Bootstrap Carousel Individual Item Intervals is an attribute of the React Bootstrap component used to set a duration for individual images present in the corousel. By using this, we can set a different duration for all images present in the carousel component.

Props

• Interval: It is used to specify duration for each Carousel Component. Time should be in milliseconds.

Syntax:

<Carousel.Item interval={*}>

Note: Replace * with time in milliseconds

Example 1: This example explains multiple Corousel Components with 500 milliseconds.

Javascript

// App.js
import React, { useState } from 'react';
import 'bootstrap/dist/css/bootstrap.css';
import Carousel from 'react-bootstrap/Carousel';

export default function App() {
    const [index, setIndex] = useState(0);
    const handleSelect = (selectedIndex) => {
        setIndex(selectedIndex);}
    return (
        <div style={{ display: 'block',
                      width: 800,
                      padding: 30}}>
            <h2 style={{ color: 'green' }}>
                GeeksforGeeks
            </h2>
            <h2>
                React-Bootstrap Carousel
                Individual Item Intervals
            </h2>
            <Carousel activeIndex={index}
                      onSelect={handleSelect}>
                <Carousel.Item interval={500}>
                    <img className="d-block w-100"
                         src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/Java.png"
                         alt="JAVA" />
                </Carousel.Item>
                <Carousel.Item interval={500}>
                    <img className="d-block w-100"
                         src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20220401124017/HTML-Tutorial.png"
                         alt="HTML" />
                </Carousel.Item>
                <Carousel.Item interval={500}>
                    <img className="d-block w-100"
                         src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210322182256/AngularJS-Tutorial.png"
                         alt="Angular" />
                </Carousel.Item>
            </Carousel>
        </div>
)}

Output:

Example 2: This example explains multiple Corousel Components with 1500 milliseconds.

Javascript

// App.js
import React from 'react';
import 'bootstrap/dist/css/bootstrap.css';
import Carousel from 'react-bootstrap/Carousel';

export default function App() {

    return (
        <div style={{
             display: 'block',
             width: 800,
             padding: 30}}>
            <h2 style={{ color: 'green' }}>
                GeeksforGeeks
            </h2>
            <h2>
                React-Bootstrap Carousel
                Individual Item Intervals
            </h2>
            <Carousel >
                <Carousel.Item interval={1500}>
                    <img className="d-block w-100"
                         src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210425122739/2-300x115.png"
                         alt="One" />
                    <Carousel.Caption>
                        <h3>Label for first slide</h3>
                        <p>Sample Text for Image One</p>
                    </Carousel.Caption>
                </Carousel.Item>
                <Carousel.Item interval={500}>
                    <img className="d-block w-100"
                         src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210425122716/1-300x115.png"
                         alt="Two" />
                    <Carousel.Caption>
                        <h3>Label for second slide</h3>
                        <p>Sample Text for Image Two</p>
                    </Carousel.Caption>
                </Carousel.Item>
            </Carousel>
        </div>
)

Output