Mi componente usa react-multi-carousel . Solo mostraría dos fotos de stock. next.config.js también.

 import Image from "next/image"; import Carousel from "react-multi-carousel"; function ProductList(props: ProductListProps) { const responsive = { superLargeDesktop: { // the naming can be any, depends on you. 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;

siguiente.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, };