我在 React 中有以下圖像滑塊，它按預期工作：
import React, { useState, useEffect } from "react";
import item1 from "./../assets/images/items/1.jpg";
import item2 from "./../assets/images/items/2.gif";
const imgs = [item1, item2]; // Array of images
const ImageSlider = () => {
const [current, setCurrent] = useState(0); // Initialize state to display the first image
// Change image every 2 seconds
useEffect(() => {
const interval = setInterval(() => {
setCurrent((current) => (current + 1) % imgs.length); // Move to the next image, go back to the first image after the last
}, 4000); // Change every 2 seconds
return () => {
clearInterval(interval); // Clean up on unmount
};
}, []);
return (
<div className="relative">
<img
src={imgs[0]}
className="w-full h-auto opacity-0"
alt="placeholder"
/>
{imgs.map((img, index) => (
<img
key={index}
src={img}
alt={`slide-img-${index}`}
className={`absolute top-0 transition-opacity duration-1000 ease-in-out ${
current === index ? "opacity-100" : "opacity-0"
} w-full h-auto`}
/>
))}
</div>
);
};
export default ImageSlider;
但它在 NextJS 中不起作用，我對其進行了一些修改以修復錯誤：
"use client";
import React, { useState, useEffect } from "react";
const imgs = ["/images/1.jpg", "/images/2.gif", "/images/3.jpg"];
const ImageSlider = () => {
const [current, setCurrent] = useState(0); // Initialize state to display the first image
// Change image every 2 seconds
useEffect(() => {
const interval = setInterval(() => {
setCurrent((current) => (current + 1) % imgs.length); // Move to the next image, go back to the first image after the last
}, 2000); // Change every 2 seconds
return () => {
clearInterval(interval); // Clean up on unmount
};
}, []);
return (
<div className="relative">
<img
src={imgs[0]}
className="w-full h-auto opacity-0"
alt="placeholder"
/>
{imgs.map((img, index) => (
<img
key={index}
src={img}
alt={`slide-img-${index}`}
className={`absolute top-0 transition-opacity duration-1000 ease-in-out ${
current === index ? "opacity-100" : "opacity-0"
} w-full h-auto`}
/>
))}
</div>
);
};
export default ImageSlider;
我嘗試在元件頂部新增「使用客戶端」並修改程式碼以修復 IDE 顯示的錯誤，陣列中的所有圖像都顯示在瀏覽器網路標籤中。
在 Next.js 中，您不能直接在頂級元件中使用 React hooks。相反，您可以在 Next.js 的 useEffect 函數中使用 useEffect 掛鉤。以下是修改程式碼使其在 Next.js 中運行的方法：
import { useState, useEffect } from "react"; const imgs = ["/images/1.jpg", "/images/2.gif", "/images/3.jpg"]; const ImageSlider = () => { const [current, setCurrent] = useState(0); useEffect(() => { const interval = setInterval(() => { setCurrent((current) => (current + 1) % imgs.length); }, 2000); return () => { clearInterval(interval); }; }, []); // Empty dependency array to run effect only once return (
{imgs.map((img, index) => (
))}
);
};
export default ImageSlider;