How to create a React Bootstrap carousel for landing pages

Photo by Lautaro Andreani on Unsplash

You may have encountered a situation where you need to add a carousel to the landing pages. A carousel is a slide show of images or videos or a combination of both images and videos in a cyclic manner. You can create a carousel from scratch with HTML, CSS, and JavaScript. However, if you use a CSS framework such as React Bootstrap, you can cut down a significant amount of development time. In this post, I will show you how to use React Bootstrap to create a carousel with video and images for a landing page. You can use a carousel in the background, but I am going to use this carousel in the foreground in this post.

Setting up the project with create-react-app

1. Create a React app: npx create-react-app demo-slide-show
2. Create a folder named assets in src folder
3. Add two images and one video clip ( if you do not want to use YouTube video ) to this folder. You can add your own images or download them from the resources section with full code.

Install React Bootstrap

1. Install React Bootstrap: npm install react-bootstrap bootstrap
2. Add the following scripts to public/index.html. You need these script tags for Bootstrap to work