Ви не можете вибрати більше 25 тем Теми мають розпочинатися з літери або цифри, можуть містити дефіси (-) і не повинні перевищувати 35 символів.

44 рядки
1.5 KiB

  1. import React from "react";
  2. import { makeStyles } from "@material-ui/core/styles";
  3. import GridContainer from "components/Grid/GridContainer.js";
  4. import GridItem from "components/Grid/GridItem.js";
  5. import Card from "components/Card/Card.js";
  6. import styles from "assets/jss/nextjs-material-kit/pages/componentsSections/homeStyle.js";
  7. import Carousel from "react-slick";
  8. import Grid from '@material-ui/core/Grid';
  9. import image1 from 'assets/img/carousel/1.jpg'
  10. import image2 from 'assets/img/carousel/2.jpg'
  11. import image3 from 'assets/img/carousel/3.jpg'
  12. const useStyles = makeStyles(styles);
  13. const DataCarousel = function () {
  14. const classes = useStyles();
  15. const settings = {
  16. dots: true,
  17. infinite: true,
  18. speed: 500,
  19. slidesToShow: 1,
  20. slidesToScroll: 1,
  21. autoplay: true,
  22. time: 5
  23. };
  24. return (
  25. <div className={classes.root}>
  26. <Grid item xs={12} sm={12} className={classes.marginAuto}>
  27. <Card>
  28. <div className="container">
  29. <Carousel {...settings}>
  30. <img src={image1} alt="First slide" className="slick-image" />
  31. <img src={image2} alt="First slide" className="slick-image" />
  32. <img src={image3} alt="First slide" className="slick-image" />
  33. </Carousel>
  34. </div>
  35. </Card>
  36. </Grid>
  37. </div>
  38. );
  39. }
  40. export default DataCarousel;