Estoy publicando por primera vez. El formato de la pregunta puede ser un desastre, pero espero su amable cooperación.

[Mi problema]
Actualmente, el sitio web se está produciendo utilizando Next.js. Se crearon un total de seis funciones de diapositivas y hay un problema. Se crearon un entorno portátil y móvil separados, pero cuando la computadora portátil reduce el navegador a móvil o viceversa, se produce un problema en la diapositiva.

No sé si esto se llama un fenómeno de superposición, la imagen entre cada diapositiva aparece como cada imagen. Solo una imagen debe estar en el centro debajo de esos puntos deslizantes, pero se muestran dos.

He pensado en una solución, pero no tengo ni idea.

 //My Slide Component //the id value was given from zero. (total of six pictures) const totalSlide = 5; const slideRef = useRef(); const [currentSlide, setCurrentSlide] = useState(0); const prevEvent = () => { if (currentSlide === 0) setCurrentSlide(totalSlides); else setCurrentSlide(currentSlide - 1); }; const nextEvent = () => { if (currentSlide >= totalSlides) setCurrentSlide(0); else setCurrentSlide(currentSlide + 1); }; useEffect(() => { slideRef.current.style.transition = 'all 0.4s ease-out'; //The mobile environment was set to 1024px or less. if (window.innerWidth >= 1024) { slideRef.current.style.transform = `translateX(-${currentSlide * 650}px)`; } else { slideRef.current.style.transform = `translateX(-${currentSlide * 360}px)`; } }, [currentSlide]);

[El resultado de mi deseo]
Incluso si hay un cambio en el tamaño del navegador, queremos que solo aparezca una imagen sin diapositivas superpuestas. Incluso si el margen entre las imágenes se alcanza como se muestra en la imagen al superponerse, queremos arreglarlo volviendo a su lugar o inicializándolo a cero de acuerdo con el valor de identificación que muestran los puntos deslizantes.