React bootstrap carousel slider example; In this tutorial, i will show you in detail how to integrate bootstrap carousel slider in react js apps.
The carousel is a slideshow for cycling through a series of content, built with CSS 3D transforms and a bit of JavaScript. It works with a series of images, text, or custom markup. It also includes support for previous/next controls and indicators.
React Bootstrap Carousel Slider Example Tutorial
- Step 1 – Create React App
- Step 2 – Install React Bootstrap
- Step 3 – Create React Bootstrap carousel component
- Step 4 – Import React Bootstrap carousel Component in App.js
Step 1 – Create React App
In this step, open your terminal and execute the following command on your terminal to create a new react app:
npx create-react-app my-react-app
To run the React app, execute the following command on your terminal:
npm start
Check out your React app on this URL: localhost:3000
Step 2 – Install React Bootstrap
Execute the following command to install react boostrap library into your react app:
npm install react-bootstrap bootstrap
Add bootstrap.min.css file in src/App.js
file:
import React, { Component } from 'react' import '../node_modules/bootstrap/dist/css/bootstrap.min.css'; function App() { return ( <div> <h2>How to use Bootstrap carousel slider in React</h2> </div> ); } export default App;
Step 3 – Create React Bootstrap carousel component
Create BootstrapCarouselComponent.js file. So, visit the src directory of your react js app and create a table component file named BootstrapCarouselComponent.js. And add the following code into it:
// src/components/bootstrap-carousel.component.js import React from "react"; import { Carousel } from 'react-bootstrap'; import 'bootstrap/dist/css/bootstrap.min.css'; class BootstrapCarouselComponent extends React.Component { render() { return ( <div> <div className='container-fluid' > <div className="row"> <div className="col-sm-12"> <h3>React Bootstrap Carousel</h3> </div> </div> <div className="row"> <div className="col-12"> <Carousel> <Carousel.Item> <img className="d-block w-100" src="https://picsum.photos/500/300?img=1" alt="First slide" /> <Carousel.Caption> <h3>First slide label</h3> <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p> </Carousel.Caption> </Carousel.Item> <Carousel.Item> <img className="d-block w-100" src="https://picsum.photos/500/300?img=2" alt="Second slide" /> <Carousel.Caption> <h3>Second slide label</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </Carousel.Caption> </Carousel.Item> <Carousel.Item> <img className="d-block w-100" src="https://picsum.photos/500/300?img=3" alt="Third slide" /> <Carousel.Caption> <h3>Third slide label</h3> <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p> </Carousel.Caption> </Carousel.Item> </Carousel> </div> </div> </div> </div> ) }; } export default BootstrapCarouselComponent;
Step 4 – Add React Bootstrap carousel Component in App.js
Import BootstrapCarouselComponent.js file in src/App.js
file:
import React from 'react'; import '../node_modules/bootstrap/dist/css/bootstrap.min.css'; import BootstrapCarouselComponent from './BootstrapCarouselComponent' function App() { return ( <div className="App"> <BootstrapCarouselComponent /> </div> ); } export default App;
Conclusion
React bootstrap carousel slider example; In this tutorial, you have learned how to integrate the bootstrap carousel slider in react js apps.
Recommended React Tutorials
- How To Install React App On Windows 10
- React Axios – Make HTTP GET Requests Example
- React Axios – Make HTTP POST Requests Example
- React Get Form Values On Submit Tutorial
- React Tutorial – How To Use Font Awesome 5 in React
- React 17 Axios File Upload Example
- React js Get Multiple Checkbox Value On Submit
- How to Get Current Date and Time in React Apps
- React 17 Hide Show Toggle Tutorial
- React Bootstrap Modal – Implement Bootstrap Modal Ex
- React Image Upload With Preview Tutorial
- React Select Dropdown With Bootstrap Example
- React Custom Email Validation Tutorial