In this article, we will learn about the Carousel Component of React-Bootstrap. This article will help you to understand the concept of the Carousel Component.
What is Carousel Component?
A front-end framework called React-Bootstrap was created with react in mind. With the help of the carousel component, we can make a slideshow out of our images or text slides that are fully present and cyclical. To use the react-bootstrap carousel component in ReactJS, use the following strategy.
Carousel Props:
| Props | Description |
| bsPrefix | It serves as a way out when working with heavily modified bootstrap CSS. |
| activeIndex | To control the currently active, visible slide, use this. |
| as | It can be utilized for this component as a custom element type. |
| controls | These are utilized to display the carousel’s next and previous buttons. |
| defaultActiveIndex | It is the 0 active index by default. |
| fade | It is used to add a fading animation while moving slides. |
| indicators | It is used to add a fading animation while moving slides. |
| interval | It is employed to extend the intervals between mechanical cycling motions. |
| keyboard | It serves as a signal for whether or not the carousel should respond to the keyboard event. |
| nextIcon | It is employed to replace the built-in next icon. |
| nextLabel | It is a form of label that is exclusively visible to screen readers and can be used to display the subsequent element in the carousel. |
| onSelect | When the active item changes, a callback is invoked. |
| onSlid | When a slide transition is completed, a callback is initiated. |
| onSlide | When a slide transition begins, a callback is invoked. |
| pause | On the basis of various mouse events, it is utilized to pause the slide. |
| prevIcon | It is employed to replace the built-in previous icon. |
| prevLabel | It is a kind of label that is only visible to screen readers and can be used to display the preceding piece in the carousel. |
| ref | It serves as the source of the element’s ref property. |
| slide | It is utilized to make the transition between slides animated. |
| touch | It is used on touchscreen devices to specify whether left/right swipe interactions should be supported. |
| wrap | It indicates whether a hard stop or continuous rotation. |
Carousel.Item Props
| Props | Description |
| as | It can be utilized for this component as a special element type. |
| interval | It is employed to extend the intervals between these objects’ automated cycling movements. |
| bsPrefix | It serves as a way out when working with heavily modified bootstrap CSS. |
Carousel.Caption Props
| Props | Description |
| as | It can be utilized for this component as a special element type. |
| bsPrefix | It serves as a way out when working with heavily modified bootstrap CSS. |
React Application Development and Module Installation
Step 1: Use the command below for creating a React application:
npx create-react-app foldernameStep 2: Use the following command for moving into your project folder:
cd foldernameStep 3: Use the following command to install the necessary module after creating the ReactJS application:
npm install react-bootstrap
npm install bootstrap The project’s structure will be as shown below:
Example:
Enter the following code in the App.js file. The app is the default component where we have written our code in this case.
import React from 'react'
import Carousel from 'react-bootstrap/Carousel';
import slide1 from "../images/kids1.png";
import slide2 from "../images/kids2.jpg";
import slide3 from "../images/kids3.jpg";
export default function App() {
return (
<div>
<section className="slider container mb-3">
<Carousel>
<Carousel.Item className='slide'>
<img
className="d-block w-100"
src= {slide1}
alt="First slide"
/>
</Carousel.Item>
<Carousel.Item className='slide'>
<img
className="d-block w-100"
src={slide2}
alt="Second slide"
/>
</Carousel.Item>
<Carousel.Item className='slide'>
<img
className="d-block w-100"
src={slide3}
alt="Third slide"
/>
</Carousel.Item>
</Carousel>
</section>Now run the application using the following command
npm startOutput:
Conclusion
This article will help you to learn about React-Bootstrap Carousel Components. Thank you for reading my article. Hope you understand very well about the carousel components.
