How To Create Responsive Carousel In React

Requirements


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.


Leave a Reply

Your email address will not be published.

Recent post

Redux to a Next JS App
Redux to a Next JS App
  • July 16, 2021
How to Create Objects In JavaScript
How to Create Objects In JavaScript?
  • June 29, 2021
HTML forms
HTML Forms
  • June 23, 2021
Need a successful project?

Lets Work Together

Estimate Project
  • right image
  • Left Image