Banner Slider for React App – Material UI Carousal

Sliding banners are very commonly seen on most websites. We may also have the requirement of implementing the sliders on the homepage or other parts of our React App. In this article, we gonna see how to easily implement the sliding banner component using a material UI-based React package.

Install Sliding Banner Package for React

For implementing the sliding banner feature we gonna use the React package called react-material-ui-carousel

Install command for Material UI carousel – React JS

npm i react-material-ui-carousel

Using the package Material UI carousel – React JS

GitHub Repo

Sample Code:

Banner.jsx

import React from "react";
import { bannerData } from "../../constants/data";
import Carousel from "react-material-ui-carousel";
import { makeStyles } from "@material-ui/core";

const useStyles = makeStyles({
  image: {
    width: "100%",
    height: 280,
  },
  carousel: {
    marginTop: "10",
  },
});

export const Banner = () => {
  const classes = useStyles();
  return (
    <Carousel
      autoplay={true}
      animation="slide"
      indicators={false}
      navButtonsAlwaysVisible={true}
      cycleNavigation={true}
      navButtonsProps={{
        style: {
          background: "#fff",
          color: "#494949",
          borderRadius: 0,
          margin: 0,
        },
      }}
      className={classes.carousel}
    >
      {bannerData.map((item) => (
        <img src={item} alt="" className={classes.image} />
      ))}
    </Carousel>
  );
};

constants/data.js

export const bannerData = [
  "https://rukminim1.flixcart.com/flap/3376/560/image/d117a62eb5fbb8e1.jpg?q=50",
  "https://rukminim1.flixcart.com/flap/3376/560/image/57267a180af306fe.jpg?q=50",
  "https://rukminim1.flixcart.com/flap/3376/560/image/ae9966569097a8b7.jpg?q=50",
  "https://rukminim1.flixcart.com/flap/3376/560/image/f6202f13b6f89b03.jpg?q=50",
];