|
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
|
