Image Gallery v0.8.17

React image gallery is a React component for building image galleries and carousels.

Please refer to react-image-gallery for more information.

Styles

You will find the styles for this component in
assets/scss/nextjs-material-kit-pro/plugins/_plugin-react-image-gallery.scss.

import React from 'react';
// react component used to create nice image meadia player
import ImageGallery from "react-image-gallery";
// @material-ui/core components
import { makeStyles } from "@material-ui/core/styles";
// core components
import GridContainer from "components/Grid/GridContainer.js";
import GridItem from "components/Grid/GridItem.js";

const styles = {
  productContainer: {
    "& .image-gallery-slide img": {
      borderRadius: "3px",
      maxWidth: "300px",
      height: "auto"
    },
    "& .image-gallery-swipe": {
      margin: "30px 0px",
      overflow: "hidden",
      width: "100%",
      height: "auto",
      textAlign: "center"
    },
    "& .image-gallery-thumbnails > .image-gallery-thumbnails-container a": {
      "&.active > div": {
        opacity: "1",
        borderColor: "#DDDDDD"
      },
      "& > div": {
        width: "80%",
        maxWidth: "85px",
        margin: "0 auto",
        padding: "8px",
        display: "block",
        border: "1px solid transparent",
        background: "transparent",
        borderRadius: "3px",
        opacity: ".8"
      },
      "& > div img": {
        borderRadius: "3px",
        width: "100%",
        height: "auto",
        textAlign: "center"
      }
    }
  }
};

const useStyles = makeStyles(styles);

export default function Example() {
  const classes = useStyles();
  const images = [
    {
      original: "/img/examples/product3.jpg",
      thumbnail: "/img/examples/product3.jpg"
    },
    {
      original: "/img/examples/product4.jpg",
      thumbnail: "/img/examples/product4.jpg"
    },
    {
      original: "/img/examples/product1.jpg",
      thumbnail: "/img/examples/product1.jpg"
    },
    {
      original: "/img/examples/product2.jpg",
      thumbnail: "/img/examples/product2.jpg"
    }
  ];
  return (
    <div className={classes.productContainer}>
      <GridContainer>
        <GridItem md="6" sm="12">
          <ImageGallery
            showFullscreenButton={false}
            showPlayButton={false}
            startIndex={3}
            items={images}
          />
        </GridItem>
      </GridContainer>
    </div>
  )
};