Next.js 13 反应响应轮播不工作

Question

我正在关注创建一个 eBay 克隆。步骤之一是创建一个轮播。当我添加它时，它不会移动到下一页。我尝试过卸载并重新安装软件包。我是新来的，所以我不确定可能是什么问题。我还尝试使用和删除“使用客户端”指令。

我查看了控制台，按钮上似乎没有事件侦听器，我不确定为什么它们不存在。我很感激你的帮助。下面是我的代码：

"use client";

import Image from "next/image";
import { Carousel } from "react-responsive-carousel";
import "react-responsive-carousel/lib/styles/carousel.min.css";

export default function CarouselComp() {
  return (
    <>
      <div className='max-w-[1200px] mx-auto'>
        <Carousel showArrows={true} autoPlay={true} interval={3000} infiniteLoop={true} showThumbs={false}>
            <div>
                <Image src={"/images/banner/1.png"} alt="Banner image" width={1200} height={300}/>
            </div>
            <div>
                <Image src="/images/banner/2.png" alt="Banner image"  width={1200} height={300}/>
            </div>
            <div>
                <Image src="/images/banner/3.png"  alt="Banner image" width={1200} height={300} />
            </div>
        </Carousel>
      </div>
    </>
  );
};

这里是package.json

{
  "name": "ebay-clone",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "dev turbo": "next dev --turbo",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "prisma": {
    "seed": "node prisma/seed.js"
  },
  "dependencies": {
    "@prisma/client": "^5.1.1",
    "@radix-ui/react-slot": "^1.0.2",
    "@stripe/stripe-js": "^2.1.0",
    "@supabase/auth-helpers-nextjs": "^0.7.4",
    "@supabase/auth-helpers-react": "^0.4.2",
    "@supabase/auth-ui-react": "^0.4.2",
    "@supabase/auth-ui-shared": "^0.1.6",
    "@supabase/supabase-js": "^2.32.0",
    "@types/node": "20.5.1",
    "@types/react": "18.2.20",
    "@types/react-dom": "18.2.7",
    "autoprefixer": "10.4.15",
    "class-variance-authority": "^0.7.0",
    "clsx": "^2.0.0",
    "dayjs": "^1.11.9",
    "debounce": "^1.2.1",
    "eslint": "8.47.0",
    "eslint-config-next": "13.4.19",
    "lucide-react": "^0.268.0",
    "next": "13.4.19",
    "postcss": "8.4.28",
    "prisma": "^5.1.1",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-icons": "^4.10.1",
    "react-responsive-carousel": "^3.2.23",
    "react-toastify": "^9.1.3",
    "stripe": "^13.2.0",
    "tailwind-merge": "^1.14.0",
    "tailwindcss": "3.3.3",
    "tailwindcss-animate": "^1.0.6",
    "typescript": "5.1.6"
  }
}

我有点偏离教程并尝试使用 typescript 和 next/Image。不确定这些是否会导致问题

单击任何按钮都不会更改图像，也不会自动播放：

Answer 1

我修正了错误。这是 next.js 版本问题。我回滚到版本 13.4.12，它修复了该错误并修复了我遇到的其他一些问题

Answer 2

改用 React Multi Carousel。这是它的更好版本。

npm 我反应-多轮播