Tengo una presentación de diapositivas en mi sitio web que consta de 3 diapositivas. Básicamente seguí este tutorial www.youtube.com/watch?v=VYsVOamdB0g&t , incluida la parte 2 de Kevin Powell. Todo es igual, pero hay un problema con los elementos superpuestos cuando cambio el tamaño de la pantalla. Creé un detector de eventos cuando alguien cambia el tamaño de la pantalla y el código es:

 var windowSize = innerWidth; //width of the screen var slideWidth = slides[0].getBoundingClientRect().width; // width of the slide const setSlidePosition = (slide, index) => { var newWindowSize = innerWidth; const scaleFac = newWindowSize/windowSize; windowSize = newWindowSize; slideWidth *= scaleFac; slide.style.left= slideWidth * index + 'px'; } slides.forEach(setSlidePosition); window.addEventListener('resize', setSlidePosition); // whenever someone resizes screen

El código funciona siempre que alguien hace que la pantalla sea más pequeña, pero cuando alguien hace que la pantalla sea más grande que la original, los elementos se superponen:

Antes de cambiar el tamaño:

Después de cambiar el tamaño: