Create beautiful image sliders/carousels in react using react-alice-carousel

When I was working in one of my react project my client asked me to create beautiful sliders for his website. I tested many react modules for creating sliders but none of them gave the result I was looking for. After a lot of testing and searching, I found the React Alice Carousel module. According to me, it’s the best solution and alternative to the owl carousel to create any type of slider/carousel in the react js app. So let’s get started.

Requirements

• react-alice-carousel
• images from https://pixabay.com/

1. Create your react project.

create-react-app imageslider

2. Install react-alice-carousel.

npm i react-alice-carousel --save

3. Now open the project in your favorite IDE and open app.js file.

4. Now inside your app.js file import react-alice-carousel and its CSS file to the project.

import AliceCarousel from 'react-alice-carousel';
import "react-alice-carousel/lib/alice-carousel.css";

5. Now import images for the slider. If you are using any API then you no need to import images just pass the tag to your loop. Here, in this case, I am not using any API so I’ll be importing the images. Create a folder with the name img inside your src directory and put all the images there and after that import images one by one in your app.js file.

6. Now put this code inside div to create the slider.

<AliceCarousel autoPlay autoPlayInterval="3000">
      <img src={image1} className="sliderimg"/>
      <img src={image2} className="sliderimg"/>
      <img src={image3} className="sliderimg"/>
      <img src={image4} className="sliderimg"/>
</AliceCarousel>

Your code will look something similar to this.

7. Now it’s time to add some styling to our slider. Put this code inside your app.css file

.sliderimg{
  width: 100%;
  height: 500px;
  object-fit: cover
}

Hurray how easily we have created our slider. Here is the live example.

That was very simple I know. Ok, so let us go to the advance part and create a slider using some external API. So for this part, I’ll be using JSON data from picsum.photos. So let us get started

1. You need to first install Axios to fetch data from API.

npm install axios --save

2. Now import Axios and react-alice-carousel to your app.js file.

import axios from 'axios'
import AliceCarousel from 'react-alice-carousel';
import "react-alice-carousel/lib/alice-carousel.css";

3. Now we will create a constructor method to initialize our state, a getData function to get data from picsum photos API using Axios and call that function inside our componentDidMount lifecycle method and a responsive object which contains the number of items we want to show in different screen sizes. Paste this code before your render method.

Note: In responsive object I have selected 2 items to show for the screen above 1024px if you want to show 1 change that to 1 or if you want to change the slider to mulitple logo carousel change that to 5 or 6.

4. Now you need to call the Alice carousel inside your render function. Paste the below code inside your render return method.

5. Now put some basic styling to our slider. Paste this inside your app.css file.

6. Here is the full code, live example, and git repository

Mediumtutorial/medium-sliders

There are many options such as playButtonEnabled, fadeOutAnimation, touchTrackingEnabled which you will find on the documentation. For more such options visit the official git repository.