1import React from "react";
2// react component for creating beautiful carousel
3import Carousel from "react-slick";
4// @material-ui/core components
5import { makeStyles } from "@material-ui/core/styles";
6// @material-ui/icons
7import LocationOn from "@material-ui/icons/LocationOn";
8// core components
9import GridContainer from "components/Grid/GridContainer.js";
10import GridItem from "components/Grid/GridItem.js";
11import Card from "components/Card/Card.js";
12
13import carouselStyle from "assets/jss/nextjs-material-kit-pro/pages/componentsSections/carouselStyle.js";
14
15import image1 from "assets/img/bg.jpg";
16import image2 from "assets/img/bg2.jpg";
17import image3 from "assets/img/bg3.jpg";
18
19const useStyles = makeStyles(carouselStyle);
20
21export default function SectionCarousel() {
22  const classes = useStyles();
23  const settings = {
24    dots: true,
25    infinite: true,
26    speed: 1000,
27    slidesToShow: 1,
28    slidesToScroll: 1,
29    autoplay: true
30  };
31  return (
32    <div className={classes.section} id="carousel">
33      <div className={classes.container}>
34        <GridContainer>
35          <GridItem xs={12} sm={10} md={8} className={classes.marginAuto}>
36            <Card>
37              <Carousel {...settings}>
38                <div>
39                  <img src={image1} alt="First slide" className="slick-image" />
40                  <div className="slick-caption">
41                    <h4>
42                      <LocationOn className="slick-icons" />
43                      Yellowstone National Park, United States
44                    </h4>
45                  </div>
46                </div>
47                <div>
48                  <img
49                    src={image2}
50                    alt="Second slide"
51                    className="slick-image"
52                  />
53                  <div className="slick-caption">
54                    <h4>
55                      <LocationOn className="slick-icons" />
56                      Somewhere Beyond, United States
57                    </h4>
58                  </div>
59                </div>
60                <div>
61                  <img src={image3} alt="Third slide" className="slick-image" />
62                  <div className="slick-caption">
63                    <h4>
64                      <LocationOn className="slick-icons" />
65                      Yellowstone National Park, United States
66                    </h4>
67                  </div>
68                </div>
69              </Carousel>
70            </Card>
71          </GridItem>
72        </GridContainer>
73      </div>
74    </div>
75  );
76}