Carousel Container - Copy this React, Mui Component to your project

Import React, { useState, useEffect } from "react"; import { Box, Typography, Button, Container, IconButton } from "@mui/material"; // import { styled } from "@mui/system"; import { FaChevronLeft, FaChevronRight } from "react icons/fa"; const CarouselContainer = styled(Box)(({ theme }) => ({ position: "relative", overflow: "hidden", borderRadius: theme.shape.borderRadius, boxShadow: theme.shadows[5], "&:hover .controls": { opacity: 1, }, })); const CarouselSlide = styled(Box)(({ theme }) => ({ display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", height: "400px", [theme.breakpoints.up("md")]: { height: "500px", }, backgroundSize: "cover", backgroundPosition: "center", color: "#fff", textAlign: "center", padding: theme.spacing(4), transition: "opacity 0.5s ease in out", })); const CarouselControls = styled(Box)(({ theme }) => ({ position: "absolute", top: "50%", transform: "translateY( 50%)", display: "flex", justifyContent: "space between", width: "100%", opacity: 0, transition: "opacity 0.3s ease in out", zIndex: 1, })); const ControlButton = styled(IconButton)(({ theme }) => ({ color: "#fff", backgroundColor: "rgba(0, 0, 0, 0.5)", "&:hover": { backgroundColor: "rgba(0, 0, 0, 0.7)", }, })); const StyledButton = styled(Button)(({ theme }) => ({ marginTop: theme.spacing(2), fontWeight: "bold", borderRadius: "25px", padding: `${theme.spacing(1)} ${theme.spacing(3)}`, transition: "all 0.3s ease in out", "&:hover": { transform: "scale(1.05)", }, })); const slides = [ { image: "https://images.unsplash.com/photo 1581788604067 769a11325b0d?ixlib=rb 4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80", title: "Professional AC Repair Services", description: "Keep your home cool and comfortable with our expert AC repair solutions.", cta: "Schedule Service", }, { image: "https://images.unsplash.com/photo 1631511258634 912de3b92aa2?ixlib=rb 4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80", title: "Emergency AC Repairs", description: "24/7 emergency services to keep you cool when you need it most.", cta: "Call Now", }, { image: "https://images.unsplash.com/photo 1605977224328 5438dfe8b729?ixlib=rb 4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80", title: "AC Maintenance Plans", description: "Prevent breakdowns and extend the life of your AC unit with our maintenance plans.", cta: "Learn More", }, ]; const ACRepairHomepage = () => { const [currentSlide, setCurrentSlide] = useState(0); const [isPaused, setIsPaused] = useState(false); useEffect(() => { const interval = setInterval(() => { if (!isPaused) { setCurrentSlide((prevSlide) => (prevSlide + 1) % slides.length); } }, 5000); return () => clearInterval(interval); }, [isPaused]); const handlePrevSlide = () => { setCurrentSlide((prevSlide) => (prevSlide 1 + slides.length) % slides.length); }; const handleNextSlide = () => { setCurrentSlide((prevSlide) => (prevSlide + 1) % slides.length); }; return ( <Container maxWidth="lg"> <CarouselContainer onMouseEnter={() => setIsPaused(true)} onMouseLeave={() => setIsPaused(false)} > {slides.map((slide, index) => ( <CarouselSlide key={index} style={{ backgroundImage: `linear gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(${slide.image})`, opacity: index === currentSlide ? 1 : 0, position: index === currentSlide ? "relative" : "absolute", top: 0, left: 0, width: "100%", }} > <Typography variant="h2" component="h1" gutterBottom> {slide.title} </Typography> <Typography variant="h5" paragraph> {slide.description} </Typography> <StyledButton variant="contained" color="primary" size="large"> {slide.cta} </StyledButton> </CarouselSlide> ))} <CarouselControls className="controls"> <ControlButton onClick={handlePrevSlide} aria label="Previous slide"> <FaChevronLeft /> </ControlButton> <ControlButton onClick={handleNextSlide} aria label="Next slide"> <FaChevronRight /> </ControlButton> </CarouselControls> </CarouselContainer> </Container> ); }; export default ACRepairHomepage;