J'ai le curseur d'image suivant dans React et il fonctionne comme prévu :
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;
Mais ça ne marche pas dans NextJS, j'ai fait quelques modifications pour corriger l'erreur :
"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;
J'ai essayé d'ajouter "Utiliser le client" en haut du composant et modifié le code pour corriger l'erreur affichée par l'EDI, toutes les images du tableau étaient affichées dans l'onglet réseau du navigateur.
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Dans Next.js, vous ne pouvez pas utiliser les hooks React directement dans les composants de niveau supérieur. Au lieu de cela, vous pouvez utiliser le hook useEffect dans la fonction useEffect de Next.js. Voici comment modifier votre code pour qu'il s'exécute dans 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;