tbg-ecomm-nextjs/pages-sections/honda/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/notificationsStyles.js";
import Carousel from "react-slick";
import Grid from '@material-ui/core/Grid';

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.root} style={{marginTop:"-30px"}}>
            <Grid item xs={12} sm={12} className={classes.marginAuto}>
                <div className="container">
                    <Carousel {...settings}>
                        {Carousels}
                    </Carousel>
                </div>
            </Grid>
            <Grid container style={{marginTop:"-40px"}}>
                <Grid item xs={6} className={classes.marginAuto}>
                    <Card>
                        <div className="container">
                            <Carousel {...settings}>
                                <iframe width="815" height="448" src="https://www.youtube.com/embed/ctv6XEB3ZT4" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen style={{height: "300px", width: "500px", display: "block"}}></iframe>
                            </Carousel>
                        </div>
                    </Card>
                </Grid>
                <Grid item xs={6} className={classes.marginAuto}>
                    <Card>
                        <div className="container">
                            <Carousel {...settings}>
                                <iframe width="815" height="448" src="https://www.youtube.com/embed/sI3n7Fh8lrQ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen style={{height: "300px", width: "500px", display: "block"}}></iframe>
                            </Carousel>
                        </div>
                    </Card>
                </Grid>
            </Grid>
        </div>
    );
}

export default DataCarousel;