Du kannst nicht mehr als 25 Themen auswählen Themen müssen entweder mit einem Buchstaben oder einer Ziffer beginnen. Sie können Bindestriche („-“) enthalten und bis zu 35 Zeichen lang sein.
 
 

46 Zeilen
1.6 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. import image4 from 'assets/img/carousel/4.jpg'
  13. const useStyles = makeStyles(styles);
  14. const DataCarousel = function () {
  15. const classes = useStyles();
  16. const settings = {
  17. dots: true,
  18. infinite: true,
  19. speed: 500,
  20. slidesToShow: 1,
  21. slidesToScroll: 1,
  22. autoplay: true,
  23. time: 5
  24. };
  25. return (
  26. <div className={classes.root}>
  27. <Grid item xs={12} sm={12} className={classes.marginAuto}>
  28. <Card>
  29. <div className="container">
  30. <Carousel {...settings}>
  31. {/* <img src={image1} alt="First slide" className="slick-image" /> */}
  32. {/* <img src={image2} alt="First slide" className="slick-image" /> */}
  33. <img src={image3} alt="First slide" className="slick-image" />
  34. <img src={image4} alt="First slide" className="slick-image" />
  35. </Carousel>
  36. </div>
  37. </Card>
  38. </Grid>
  39. </div>
  40. );
  41. }
  42. export default DataCarousel;