tbg-ecomm-nextjs/pages-sections/home/carousel.js

import React from "react";

// @material-ui/core components
import { makeStyles } from "@material-ui/core/styles";

// Component
import GridContainer from "components/Grid/GridContainer.js";
import GridItem from "components/Grid/GridItem.js";
import Card from "components/Card/Card.js";
import styles from "assets/jss/nextjs-material-kit/pages/componentsSections/notificationsStyles.js";

// react component for creating beautiful carousel
import Carousel from "react-slick";

const useStyles = makeStyles(styles);
const DataCarousel = function ({ backend, carousel, ...props })  {
    const classes = useStyles();
    const settings = {
      dots: true,
      infinite: true,
      speed: 500,
      slidesToShow: 1,
      slidesToScroll: 1,
      autoplay: true,
      time: 5
    };
    const Carousels = carousel.map((data) => {
      return (
        <div>
          <img src={`${backend}${data.img[0]["url"]}`} alt="First slide" className="slick-image" />
      </div>
      );
    })
    return (
      <div className={classes.section} id="notifications">
        <div className={classes.section}>
          <div className={classes.container}>
            <GridContainer>
              <GridItem className={classes.marginAuto}>
              <Card carousel>
                <Carousel {...settings}>
                  {Carousels}
                </Carousel>
              </Card>
              </GridItem>
            </GridContainer>
          </div>
        </div>
      </div>
    );
}

export default DataCarousel;