React Bootstrap Carousel Slider Tutorial

React Bootstrap Carousel Slider Tutorial

React bootstrap carousel slider example; In this tutorial, you will learn how to implement bootstrap carousel slider in react js apps.

You must have seen on many websites and apps. Some images keep sliding in the slider. It is called a carousel slider. If you want to integrate a carousel slider in your react app. So this tutorial will provide you step by step guide, by following which you can integrate and implement Bootstrap Carousel Slider in your react js app.

How to use Bootstrap Carousel Slider in React

  • Step 1 – Create React App
  • Step 2 – Install React Bootstrap
  • Step 3 – Create React Bootstrap carousel component
  • Step 4 – Add React Bootstrap carousel Component in App.js
  • Step 5 – Properties and Methods on <Carousel/>

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

In this step, 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

Import import { Carousel } from ‘react-bootstrap’;'” Into your table 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

In this step, you need to add 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;

Step 5 – Properties and Methods on <Carousel/>

Following are the properties and methods available on the bootstrap Carousel component

Properties

  • controls : Show/ Hide the Navigation Next and Previous arrows on the carousel. Default is set to true
  • fade : Crossfade slides instead of the default slide animation. The default is set to false to apply slide effect.
  • slide : Enables animation on the Carousel as it transitions between slides. Default is set to true
  • indicators : To show/hide the horizontal pipe indicators on the carousel bottom. Default is set to true
  • interval : The amount of time in milliseconds to delay between automatically cycling an item. If null, carousel will not automatically cycle. Default is set to 5000
  • keyboard : Whether the carousel should react to keyboard events. Default is set to true
  • pause : If set to “hover”, pauses the cycling of the carousel on mouseenter and resumes the cycling of the carousel on mouseleave. If set to false, hovering over the carousel won’t pause it.
  • nextLabel : The label shown to screen readers only can be used to show the next element in the carousel. Set to null to deactivate. Default is set to ‘Next’
  • prevLabel : The label shown to screen readers only can be used to show the previous element in the carousel. Set to null to deactivate. Default is set to ‘Previous’
  • nextIcon : Override the default button icon for the “next” control
  • prevIcon : Override the default button icon for the “previous” control
  • touch : Whether the carousel should support left/right swipe interactions on touchscreen devices. Default is set to true
  • wrap : Whether the carousel should cycle continuously or have hard stops. The default is set to true.
  • bsPrefix : Change the underlying component CSS base class name and modifier class names prefix. Default is set to ‘carousel’

Methods

  • onSelect() : Callback fired when the active item changes.
  • onSlid() : Callback fired when a slide transition ends.
  • onSlide() : Callback fired when a slide transition starts.

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 JS Posts

AuthorAdmin

My name is Devendra Dode. I am a full-stack developer, entrepreneur, and owner of Tutsmake.com. I like writing tutorials and tips that can help other developers. I share tutorials of PHP, Python, Javascript, JQuery, Laravel, Livewire, Codeigniter, Vue JS, Angular JS, React Js, WordPress, and Bootstrap from a starting stage. As well as demo example.

Leave a Reply

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