为什么轮播在 Next.js 项目中不可见？

Question

我的组件使用 react-multi-carousel。我只会展示两张库存照片。我也调整了next.config.js。

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;

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

Answer 1

因为您缺少样式导入。将此添加到您的页面：

import "react-multi-carousel/lib/styles.css";

Next.js 的完整官方示例如下：https://github.com/YIZHUANG/react-multi-carousel/tree/master/examples/ssr

为什么轮播在 Next.js 项目中不可见？

Why carousel is not visible in Next.js project?

javascript

carousel

next.js