Carousel

show code

componennt

import Box from "@mui/material/Box";
import Stack from "@mui/material/Stack";
import Typography from "@mui/material/Typography";
import { Carousel, CarouselArrows, Image, useCarousel } from "mui-eazy";
import { imgeList } from "./data";
// ----------------------------------------------------------------------
export default function MarketingCaseStudyDetailsGallery() {
	const slides = imgeList.map((slide) => ({
		src: slide,
	}));

	const carousel = useCarousel(
		slides.length > 5
			? {
					dots: true,
					infinite: true,
					speed: 500,
					slidesToShow: 5,
					slidesToScroll: 1,
			  }
			: {
					centerMode: true,
					slidesToShow: slides.length,
			  },
	);

	return (
		<>
			<Stack
				direction="row"
				justifyContent="space-between"
				sx={{ mt: 3, mb: 5 }}
			>
				<Typography variant="h4">Gallery</Typography>
				<CarouselArrows
					spacing={2}
					onNext={carousel.onNext}
					onPrev={carousel.onPrev}
				/>
			</Stack>

			<Carousel ref={carousel.carouselRef} {...carousel.carouselSettings}>
				{slides.map((slide, index) => (
					<Box key={index} sx={{ px: 1 }}>
						<Box
							sx={{
								borderRadius: 2,
								overflow: "hidden",
								cursor: "pointer",
							}}
						>
							<Image
								sx={{
									height: "165px",
								}}
								alt={slide.src}
								src={slide.src}
								ratio="16/9"
							/>
						</Box>
					</Box>
				))}
			</Carousel>
		</>
	);
}

data

export const imgeList = [
	"https://qiniu.moderate.run/img/20220831081227.png",
	"https://qiniu.moderate.run/img/QQ20230420-204615%402x.png",
	"https://qiniu.moderate.run/img/QQ20230420-205004%402x.png",
	"https://qiniu.moderate.run/img/20220831081227.png",
	"https://qiniu.moderate.run/img/QQ20230420-204615%402x.png",
	"https://qiniu.moderate.run/img/QQ20230420-205004%402x.png",
	"https://qiniu.moderate.run/img/20220831081227.png",
	"https://qiniu.moderate.run/img/QQ20230420-204615%402x.png",
	"https://qiniu.moderate.run/img/QQ20230420-205004%402x.png",
];

Props

tip

• Type: any, can be customized as needed.
• Default value:
  • Not specified: optional.
  • Specified as "require": mandatory.
• Type link: Click to navigate to the details below.

Option	Type	Default	Description
ref	ref		dom ref
slidesToShow	number		the sum of cards to show
slidesToScroll	number		the num of cards to carousel by one step
speed	number		speed of carousel
infinite	boolean		loop carousel

Type