How To Create Responsive Carousel In React?

Requirements

• React-Alice-Carousel
• images from https://unsplash.com/

---

Demo

---

How to use it?

1. Create your react project.

create-react-app Carousel 

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 "react-alice-carousel/lib/alice-carousel.css";
import AliceCarousel from 'react-alice-carousel';

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>

---

My app.js File.

import React from "react";
import "./styles.css";
import AliceCarousel from 'react-alice-carousel';
import "react-alice-carousel/lib/alice-carousel.css";
import image1 from './img/1.jpg'
import image2 from './img/2.jpg'
import image3 from './img/3.jpg'
import image4 from './img/4.jpg'

export default function App() {
  return (
    <div className="App">
     <AliceCarousel autoPlay autoPlayInterval="3000">
      <img src={image1} className="sliderimg" alt=""/>
      <img src={image2} className="sliderimg" alt=""/>
      <img src={image3} className="sliderimg" alt=""/>
      <img src={image4} className="sliderimg" alt=""/>
    </AliceCarousel>
    </div>
  );
}

In advance, you can fetch images from JSON data using Axios get request. For more documentation here.

---