React-Bootstrap Carousel Controlled Props
- activeIndex: It identifies the currently shown slide in a Carousel based on its index.
- onSelect: onSelect is a function which called when the user changes the active slide.
<Carousel activeIndex={index} onSelect={handleSelect}>
Example: Here, below is the basic implementation of the Carousel Controlled.
Javascript
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: 700, padding: 30 }}> <h2 style={{ color: 'green' }}> w3wiki </h2> <h2>React-Bootstrap Carousel Controlled</h2> <Carousel activeIndex={index} onSelect={handleSelect}> <Carousel.Item interval={1500}> <img className= "d-block w-100" src= "https://media.w3wiki.org/wp-content/cdn-uploads/Java.png" alt= "JAVA" /> </Carousel.Item> <Carousel.Item interval={500}> <img className= "d-block w-100" src= "https://media.w3wiki.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.w3wiki.org/wp-content/cdn-uploads/20210322182256/AngularJS-Tutorial.png" alt= "Angular" /> </Carousel.Item> </Carousel> </div> ); } |
Output: Now open your browser and go to http://localhost:3000/, you will see the following output
Example 2: In this example, we will see how to add Carousel.Caption to the Carousel Controlled
Javascript
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: 700, padding: 30 }}> <h2 style={{ color: 'green' }}> w3wiki </h2> <h2>React-Bootstrap Carousel Controlled</h2> <Carousel activeIndex={index} onSelect={handleSelect}> <Carousel.Item interval={1500}> <img className= "d-block w-100" src= "https://media.w3wiki.org/wp-content/uploads/20210425122739/2-300x115.png" alt= "Image 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.org/wp-content/uploads/20210425122716/1-300x115.png" alt= "Image Two" /> <Carousel.Caption> <h3>Label for second slide</h3> <p>Sample Text for Image Two</p> </Carousel.Caption> </Carousel.Item> </Carousel> </div> ); } |
Output: Now open your browser and go to http://localhost:3000/, you will see the following output
Reference: https://react-bootstrap.github.io/docs/components/carousel#controlled
React-Bootstrap Carousel Controlled
React-Bootstrap Carousel Controlled is a feature that allows you to style engaging images or content sliders for your web pages. React-Bootstrap’s Carousel component provides control, enabling you to take the reins over the carousel’s content, navigation, and behavior.
Contact Us