In this tutorial, you will learn how to create an image slider or carousel in reactjs application. We will make a responsive image slider carousel step-by-step in this example tutorial.
The image slider is the collection of images and the control of the next/previous button so that the user can move to the next/previous image using that control button.
There are many ways to create an image slider or carousel in reactjs like using the Material UI components, bootstrap slider, npm packages, etc. But here we will use the
react-responsive-carousel npm package and bootstrap to design it.
Let’s get started.
React Responsive Carousel NPM Package
React Responsive Carousel package is a very popular library to make an image slider or carousel in reactjs application. It has lots of configurations that you use to configure the slider/carousel in your application.
react-responsive-carousel package, you can also add content and thumbnail of images with it. And you can also render the images automatically to make a slider in react.
Important features of react-responsive-carousel
- Responsive and Mobile friendly
- Allow swipe to slide
- Server-side rendering
- Auto play with custom interval
- Infinite loop and custom animation duration
- Horizental and Vertically scroll
- Support images, video, text content
- Custom thumbnails, arrows, and indicators
Let’s now create an image slider or carousel in reactjs using the react-responsive-carousel npm package.
Create Image Slider/Carousel in ReactJS
To create an image slider in react application, you first have to install this npm package and then create the component with a collection of images and use this package.
Let’s see a step-by-step guide from start.
Install React Application
The first step is to install the react application on your machine. You can skip this step if you already have installed it. Or use the following command to install react application.
For a detailed guide to installing react application, you can see a tutorial on how to install reactjs and create an application?
Install React Responsive Carousel and Bootstrap
Now you have to install the
bootstrap npm packages in your react application. So use the following command to install it.
Create Carousel Component
Now we have installed react application and the required npm package, it’s time to use that react carousel and bootstrap package to build the slider.
So, create a “CarouselComponent.js” file in your component folder. The name of the file doesn’t matter you can take anything.
Now import the Carousel component from the
react-responsive-carousel package and also import the carousel.min.css and bootstrap.min.css files from their resources.
See the full component code of the image slider in reactjs. You can see how we have implemented the bootstrap classes and the carousel component.
See Also: How to Import and Use Bootstrap in React JS?
Use Carousel Component
We have just created the carousel slider in react js component, now let’s use it. We will use this component in the “App.js” file for this tutorial. But you can import anywhere you want.
In the above code, you can see we have used the <Carousel/> component with some configuration settings like an infinite loop, autoplay, etc. There are settings props and customizations that you can use, see the detailed guide here.
Some More Examples
Let’s see some more examples of the react-responsive-carousel package. It’s all up to you how you want the carousel or slider and how you will design and implement it.
Dynamic Images Slider
In this example, we will use the dynamic collection of images to create an image slider or carousel in reactjs. Dynamic data objects will be fetched from API and then use the
map() method to loop each item.
See Also: How to Add and Display Image in ReactJS?
Image Slider with Content
In this example, we will create an image slider with text content and we will use the reactjs bootstrap components to style it or you can also use the inline style. See the following example.
I have created the multiple components for these examples in codesandbox here, you check each in the App.js file and customize it as you want.
So in this tutorial, you learned about how to create an image slider or carousel in reactjs using the react-responsive-carousel npm package. We have implemented the basic settings props and made the code sandbox examples for you.
Hope you like it and share it. If you have any queries please do let me know in the comment section I will respond to you as soon as possible.