tbg-ecomm-nextjs/pages-sections/yamaha/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';

import Image1 from "assets/img/home-yamaha/1.png";
import Image2 from "assets/img/home-yamaha/2.jpg";
import Image3 from "assets/img/home-yamaha/3.jpg";

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:"-50px"}}>
            <Grid item xs={12} sm={12} className={classes.marginAuto}>
              <div style={{padding:"20px"}} className="container">
                <Card>
                    <Carousel {...settings}>
                      {Carousels}
                    </Carousel>
                </Card>
              </div>
            </Grid>
            <Grid container style={{marginTop:"-80px"}}>
              <Grid item xs={8} className={classes.marginAuto}>
                <div style={{padding:"20px"}} className="container">
                  <Card>
                      <Carousel {...settings}>
                      <img src={Image1} alt="First slide" className="slick-image" />
                      </Carousel>
                  </Card>
                </div>
              </Grid>                        
              <Grid item xs={4} className={classes.marginAuto}>
                <div style={{padding:"20px"}} className="container">
                  <Card>
                    <Carousel {...settings}>
                      <img src={Image2} alt="First slide" className="slick-image" />  
                    </Carousel>                
                  </Card>
                </div>
                <div style={{padding:"20px", marginTop:"-80px"}} className="container">
                  <Card>
                    <Carousel {...settings}>
                      <img src={Image3} alt="First slide" className="slick-image" />  
                    </Carousel>                
                  </Card>
                </div>
              </Grid>
            </Grid>
            <Grid container style={{marginTop:"-80px"}}>
              <Grid item xs={4} className={classes.marginAuto}>
                <div style={{padding:"20px"}} className="container">
                  <Card>
                      <Carousel {...settings}>
                        <iframe src="https://www.youtube.com/embed/zkbnKHqcez4?list=PLGDlwziWaTGKL0aphOH8j_6D29JQ1TgYY" title="YouTube video player" frameBorder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen></iframe>
                      </Carousel>
                  </Card>
                </div>
              </Grid>                        
              <Grid item xs={4} className={classes.marginAuto}>
                <div style={{padding:"20px"}} className="container">
                  <Card>
                    <Carousel {...settings}>
                      <iframe src="https://www.youtube.com/embed/zkbnKHqcez4?list=PLGDlwziWaTGKL0aphOH8j_6D29JQ1TgYY" title="YouTube video player" frameBorder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen></iframe>                    </Carousel>                
                  </Card>
                </div>
              </Grid>
              <Grid item xs={4} className={classes.marginAuto}>
                <div style={{padding:"20px"}} className="container">
                  <Card>
                    <Carousel {...settings}>
                      <iframe src="https://www.youtube.com/embed/zkbnKHqcez4?list=PLGDlwziWaTGKL0aphOH8j_6D29JQ1TgYY" title="YouTube video player" frameBorder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen></iframe>  
                    </Carousel>                
                  </Card>
                </div>
              </Grid>
            </Grid>
        </div>
    );
}

export default DataCarousel;