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

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

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/homeStyle.js";
import Carousel from "react-slick";
import Grid from '@material-ui/core/Grid';

import image1 from 'assets/img/carousel/1.jpg'
import image2 from 'assets/img/carousel/2.jpg'
import image3 from 'assets/img/home/banner2.jpg'
import image4 from 'assets/img/home/banner1.jpg'

const useStyles = makeStyles(styles);
const DataCarousel = function ()  {
    const classes = useStyles();
    const settings = {
        dots: true,
        infinite: true,
        speed: 500,
        slidesToShow: 1,
        slidesToScroll: 1,
        autoplay: true,
        time: 5
    };
    return (
        <div id="carousel" className={classes.root}>
            <Grid item xs={12} sm={12} className={classes.marginAuto}>
                <Card>
                    <div className="container">
                    <Carousel {...settings}>
                        {/* <img src={image1} alt="First slide" className="slick-image" /> */}
                        {/* <img src={image2} alt="First slide" className="slick-image" /> */}
                        <img src={image3} alt="First slide" className="slick-image" />
                        <img src={image4} alt="First slide" className="slick-image" />
                    </Carousel>
                    </div>
                </Card>
            </Grid>
        </div>
    );
}

export default DataCarousel;