React

React-Bootstrap Carousel Component

In this article, we will learn about the Carousel Component of React-Bootstrap. This article will help you to understand the concept of...

Written by Rohit Sharma · 2 min read >

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:

PropsDescription
bsPrefixIt serves as a way out when working with heavily modified bootstrap CSS.
activeIndexTo control the currently active, visible slide, use this.
asIt can be utilized for this component as a custom element type.
controlsThese are utilized to display the carousel’s next and previous buttons.
defaultActiveIndexIt is the 0 active index by default.
fadeIt is used to add a fading animation while moving slides.
indicatorsIt is used to add a fading animation while moving slides.
intervalIt is employed to extend the intervals between mechanical cycling motions.
keyboardIt serves as a signal for whether or not the carousel should respond to the keyboard event.
nextIconIt is employed to replace the built-in next icon.
nextLabelIt is a form of label that is exclusively visible to screen readers and can be used to display the subsequent element in the carousel.
onSelectWhen the active item changes, a callback is invoked.
onSlidWhen a slide transition is completed, a callback is initiated.
onSlideWhen a slide transition begins, a callback is invoked.
pauseOn the basis of various mouse events, it is utilized to pause the slide.
prevIconIt is employed to replace the built-in previous icon.
prevLabelIt is a kind of label that is only visible to screen readers and can be used to display the preceding piece in the carousel.
refIt serves as the source of the element’s ref property.
slideIt is utilized to make the transition between slides animated.
touchIt is used on touchscreen devices to specify whether left/right swipe interactions should be supported.
wrapIt indicates whether a hard stop or continuous rotation.

Carousel.Item Props

PropsDescription
asIt can be utilized for this component as a special element type.
intervalIt is employed to extend the intervals between these objects’ automated cycling movements.
bsPrefixIt serves as a way out when working with heavily modified bootstrap CSS.

Carousel.Caption Props

PropsDescription
asIt can be utilized for this component as a special element type.
bsPrefixIt 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 foldername

Step 2: Use the following command for moving into your project folder:

cd foldername

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

Output:

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.

Loading

Leave a Reply

Your email address will not be published. Required fields are marked *