My project involves utilizing the react-multi-carousel component to display a maximum of two stock photos. I made modifications to the next.config.js file as well.
import Image from "next/image";
import Carousel from "react-multi-carousel";
function ProductList(props: ProductListProps) {
const responsive = {
superLargeDesktop: {
// customized naming choices.
breakpoint: { max: 4000, min: 3000 },
items: 5,
},
desktop: {
breakpoint: { max: 3000, min: 1024 },
items: 3,
},
tablet: {
breakpoint: { max: 1024, min: 464 },
items: 2,
},
mobile: {
breakpoint: { max: 464, min: 0 },
items: 1,
},
};
let imageUrls = [
"https://media.istockphoto.com/vectors/red-apple-illustration-icon-vector-vector-id1045495508",
"https://media.istockphoto.com/photos/red-apple-picture-id184276818",
];
return (
<div>
<Carousel
responsive={responsive}
ssr
infinite
itemClass="image-item"
draggable={false}
deviceType="desktop"
>
{imageUrls &&
imageUrls.map((url: string, index: number) => (
<Image
src={url}
className={`${styles.image} ${styles.carouselImage}`}
layout="responsive"
width={865}
height={513}
key={url}
priority={true}
/>
))}
</Carousel>
</div>
);
}
export default ProductList;
next.config.js:
module.exports = {
images: {
domains: [
"ticket-t01.s3.eu-central-1.amazonaws.com",
"media.istockphoto.com",
],
deviceSizes: [320, 375, 450, 540, 640, 750, 828, 1080, 1200, 1920],
},
reactStrictMode: true,
poweredByHeader: false,
};