Introduction

In this article, I will explain how to create a Bootstrap Carousel in React.js. A Carousel is a slideshow for cycling a series of images or videos. A carousel rotates the images horizontally or vertically with some effect.

Prerequisites

  • Basic knowledge of React.js.
  • Visual Studio Code.
  • Node and NPM installed.
  • Bootstrap.

Create ReactJS Project

Let’s first create a React application using the following command.

Open the newly created project in Visual Studio Code and install Bootstrap in this project using the following command.  

Now, open the index.js file and import Bootstrap.

Now, right-click on the public folder. Add a new folder, assets, and under it, add a new folder and rename that to img. Then, add some demo images to this folder

File system

File system

Now, go to the src folder and create a new component, BootstrapCarousel.js and add the following reference in this component   :

Add the following code in this component:

Now, open app.js file and add the following code:

Now run the project by using npm start and check the result.

We can also pause slider on mouse hover and set time intervals. Let’s create a component BootstrapCarouselDemo.js and add the following reference in this component.  

Now, open the app.js file and add the following code:

Now, run the project using ‘npm start’ and check your results.

 

Summary

In this article, we learned how to implement Bootstrap Carousel in a React.js application.



Source link

Write A Comment