carousel-mui

Fully customizable carousel component for Material UI

Examples

out of the box, the component needs only items, thumbnailStyle and controls props, so the following example would be enough if all you need are the default options and configurations:

import Carousel from "carousel-mui";

function App() {
  return (
    <Carousel
      items={[
        "https://blabla/image/1",
        "https://blabla/image/2",
        "https://blabla/image/3",
        "https://blabla/image/4",
        "https://blabla/image/5",
      ]}
      thumbnailStyle="preview"
      controls={{ enabled: true }}
    />
  );
}

otherwise, if you need more control over the styles and experiment with available options, then check the props section

Props

the props that are passed to the Carousel components are as follows:

type CarouselProps = {
  items: ReactNode[];
  thumbnailStyle: "preview" | "dots" | "none";
  controls: {
    enabled: boolean;
  };
  autoPlay?: {
    duration: number;
  };
  styles?: {
    container?: {
      width?: CSSProperties["width"];
      margin?: CSSProperties["margin"];
    };
    activeSlide?: {
      minHeight?: CSSProperties["minHeight"];
      maxHeight?: CSSProperties["maxHeight"];
      minWidth?: CSSProperties["minWidth"];
      maxWidth?: CSSProperties["maxWidth"];
      marginBlockEnd?: CSSProperties["marginBlockEnd"];
    };
    thumbnails?: {
      dot?: {
        item?: {
          width?: CSSProperties["width"];
          margin?: CSSProperties["margin"];
        };
      };
      preview?: {
        item?: {
          minHeight?: CSSProperties["minHeight"];
          maxHeight?: CSSProperties["maxHeight"];
          minWidth?: CSSProperties["minWidth"];
          maxWidth?: CSSProperties["maxWidth"];
          marginBlockEnd?: CSSProperties["marginBlockEnd"];
        };
      };
    };
  };
  animation?: {
    fadeIn: number;
  };
};

the CarouselProps itself is exported, you can import it using:

import { CarouselProps } from "carousel-mui";