[Component] Mui 캐러셀

https://mui.com/material-ui/getting-started/installation/

mui를 꼭 npm한 후 진행

import * as React from "react";
import { useTheme } from "@mui/material/styles";
import Box from "@mui/material/Box";
import MobileStepper from "@mui/material/MobileStepper";
import SwipeableViews from "react-swipeable-views";
import { autoPlay } from "react-swipeable-views-utils";
import styled from "styled-components";
import img1 from "../../assets/하단 배너-1.png";
import img2 from "../../assets/하단 배너-2.png";

const AutoPlaySwipeableViews = autoPlay(SwipeableViews);

const images = [
  {
    imgPath: img1,
  },
  {
    imgPath: img2,
  },
];

function SwipeableTextMobileStepper() {
  const theme = useTheme();
  const [activeStep, setActiveStep] = React.useState(0);
  const maxSteps = images.length;

  const handleStepChange = (step) => {
    setActiveStep(step);
  };

  return (
    <Box sx={{ maxWidth: 400, flexGrow: 1 }}>
      <AutoPlaySwipeableViews
        axis={theme.direction === "rtl" ? "x-reverse" : "x"}
        index={activeStep}
        onChangeIndex={handleStepChange}
        enableMouseEvents
      >
        {images.map((step, index) => (
          <div key={step.label} style={{ display: "flex", justifyContent: "center" }}>
            {Math.abs(activeStep - index) <= 2 ? (
              <Box
                component="img"
                sx={{
                  height: 255,
                  display: "block",
                  maxWidth: 343,
                  overflow: "hidden",
                  width: "100%",
                }}
                style={{ borderRadius: "20px" }}
                src={step.imgPath}
                alt={step.label}
              />
            ) : null}
          </div>
        ))}
      </AutoPlaySwipeableViews>
      <StyledStepper style={{ justifyContent: "center" }} steps={maxSteps} position="static" activeStep={activeStep} />
    </Box>
  );
}

const StyledStepper = styled(MobileStepper)`
  & .MuiMobileStepper-dots .MuiMobileStepper-dot {
    background-color:#D9D9D9;
  }

  & .MuiMobileStepper-dots .MuiMobileStepper-dotActive{
    background-color: #00AB53;
  }
`;
export default SwipeableTextMobileStepper;