25'ten fazla konu seçemezsiniz Konular bir harf veya rakamla başlamalı, kısa çizgiler ('-') içerebilir ve en fazla 35 karakter uzunluğunda olabilir.
 
 

48 satır
1.4 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/notificationsStyles.js";
  7. import Carousel from "react-slick";
  8. const useStyles = makeStyles(styles);
  9. const DataCarousel = function ({ backend, carousel, ...props }) {
  10. const classes = useStyles();
  11. const settings = {
  12. dots: true,
  13. infinite: true,
  14. speed: 500,
  15. slidesToShow: 1,
  16. slidesToScroll: 1,
  17. autoplay: true,
  18. time: 5
  19. };
  20. const Carousels = carousel.map((data) => {
  21. return (
  22. <div>
  23. <img src={`${backend}${data.img[0]["url"]}`} alt="First slide" className="slick-image" />
  24. </div>
  25. );
  26. })
  27. return (
  28. <div className={classes.section} id="notifications">
  29. <div className={classes.section}>
  30. <div className={classes.container}>
  31. <GridContainer>
  32. <GridItem className={classes.marginAuto}>
  33. <Card carousel>
  34. <Carousel {...settings}>
  35. {Carousels}
  36. </Carousel>
  37. </Card>
  38. </GridItem>
  39. </GridContainer>
  40. </div>
  41. </div>
  42. </div>
  43. );
  44. }
  45. export default DataCarousel;