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' }}> w3wiki </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.w3wiki.net/wp-content/cdn-uploads/Java.png" alt= "JAVA" /> </Carousel.Item> <Carousel.Item interval={500}> <img className= "d-block w-100" src= "https://media.w3wiki.net/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.w3wiki.net/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' }}> w3wiki </h2> <h2> React-Bootstrap Carousel Individual Item Intervals </h2> <Carousel > <Carousel.Item interval={1500}> <img className= "d-block w-100" src= "https://media.w3wiki.net/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.w3wiki.net/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
Contact Us