mui-carousel

Mui Carousel

Demo

https://muzikanto.github.io/mui-carousel/

Example

import React from "react";
import Box from "@mui/material/Box";
import Button from "@mui/material/Button";
import { Paper } from "@mui/material";
import Carousel, { carouselClasses } from "mui-carousel";

function Page() {
  return (
    <Carousel
      renderPrev={({ disabled }) => <Button disabled={disabled}>Prev</Button>}
      renderNext={({ disabled }) => <Button disabled={disabled}>Next</Button>}
      renderDot={({ current }) => (
        <Button variant={current ? "contained" : "outlined"} />
      )}
      dots={true}
      showSlides={3}
      speed={1000 * 1}
      spacing={5}
      autoPlay={false}
      infinity // prev slide animation is broken (fixed in future)
      // value={slide}
      // onChange={(rawSlide, slide) => console.log("slide", slide)}
      pauseOnHover
      centerMode
      transitionDuration={1000}
      disableTransition={false}
      sx={{
        [`& .${carouselClasses.list}`]: {
          px: 3,
        },
        [`& .${carouselClasses.item} > *`]: {
          transition: "all 0.5s",
        },
        [`& .${carouselClasses.center} > *`]: {
          transform: "scale(1.2)",
        },
      }}
    >
      {new Array(5).fill(0).map((_, i) => (
        <Paper key={`item-${i}`} sx={{ height: 200, m: 3 }}>
          Item: {i}
        </Paper>
      ))}
    </Carousel>
  );
}