React Slick 0.24.0

Styles

You will find the styles for this component in
src/assets/scss/plugins/_plugin-react-slick.scss.

Example

Yellowstone National Park, United States

import React from "react";
// react component for creating beautiful carousel
import Carousel from "react-slick";
// material-ui components
// @material-ui/icons
import LocationOn from "@material-ui/icons/LocationOn";
// core components
import GridContainer from "/components/Grid/GridContainer.js";
import GridItem from "/components/Grid/GridItem.js";
import Card from "/components/Card/Card.js";

export default function SectionCarousel(){
  const settings = {
    dots: true,
    infinite: true,
    speed: 500,
    slidesToShow: 1,
    slidesToScroll: 1,
    autoplay: true
  };
  return (
    <GridContainer>
      <GridItem xs={12} sm={12} md={8}>
        <Card>
          <Carousel {...settings}>
            <div>
              <img
                src="https://demos.creative-tim.com/nextjs-material-kit/img/bg.jpg"
                alt="First slide"
                className="slick-image"
              />
              <div className="slick-caption">
                <h4>
                  <LocationOn className="slick-icons" />Yellowstone
                  National Park, United States
                </h4>
              </div>
            </div>
            <div>
              <img
                src="https://demos.creative-tim.com/nextjs-material-kit/img/bg2.jpg"
                alt="Second slide"
                className="slick-image"
              />
              <div className="slick-caption">
                <h4>
                  <LocationOn className="slick-icons" />Somewhere Beyond,
                  United States
                </h4>
              </div>
            </div>
            <div>
              <img
                src="https://demos.creative-tim.com/nextjs-material-kit/img/bg3.jpg"
                alt="Third slide"
                className="slick-image"
              />
              <div className="slick-caption">
                <h4>
                  <LocationOn className="slick-icons" />Yellowstone
                  National Park, United States
                </h4>
              </div>
            </div>
          </Carousel>
        </Card>
      </GridItem>
    </GridContainer>
  );
}

Props

We've added some extra classes to the default ones from react-slick.

These are .slick-image for the image of the slide, .slick-caption, the text that appears over the image and .slick-icons, used for the icon that goes along with the text.

For more details please refer to react-slick's official docs.