I have a slideshow on my website which consists of 3 slides. I basically followed this tutorial www.youtube.com/watch?v=VYsVOamdB0g&t including part 2 from Kevin Powell. Everything is the same, but there is a problem with overlapping elements when I resize the screen. I created an event listener when someone resizes the screen, and the code is:

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

The code works whenever someone makes the screen smaller, but when someone makes the screen larger than the original, the elements overlap:

Before resize:

After resize: