我正在关注创建一个 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。不确定这些是否会导致问题
单击任何按钮都不会更改图像,也不会自动播放:
我修正了错误。这是 next.js 版本问题。我回滚到版本 13.4.12,它修复了该错误并修复了我遇到的其他一些问题
改用 React Multi Carousel。这是它的更好版本。
npm 我反应-多轮播