|
- 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.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>
- <GridContainer style={{marginTop:"-30px"}}>
- <Grid style={{padding:"35px"}}>
- <Card>
- <iframe width="555" height="450" src="https://www.youtube.com/embed/zkbnKHqcez4?list=PLGDlwziWaTGKL0aphOH8j_6D29JQ1TgYY" frameBorder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen style={{height: "300px", width: "500px", display: "block"}}/>
- </Card>
- </Grid>
- <Grid style={{padding:"35px"}}>
- <Card>
- <iframe width="555" height="450" src="https://www.youtube.com/embed/zkbnKHqcez4?list=PLGDlwziWaTGKL0aphOH8j_6D29JQ1TgYY" frameBorder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen style={{height: "300px", width: "500px", display: "block"}}/>
- </Card>
- </Grid>
- </GridContainer>
- </div>
- </div>
- </div>
- );
- }
-
- export default DataCarousel;
|