JavaScript slide show works bad on the first page load

[Hypnonis]

Hello, I'm having an issue with my javascript slider inside removals page. You can check it out on www.poznanprzeprowadzki.pl (not a commercial :P), section "Galeria". On the first load, the slideshow works but, the 3/4 of one image and 1/4 of second image is inside the slideshow-container. It is possible to slide through the gallery, but one click on the button isn't moving the image enough. After the refresh, inside the slideshow-container there is only one image, and it works fine sliding through gallery. I included the script after the footer section. Hope someone can help me... :)

	const slideshowSlide = document.querySelector('.slideshow-slide');
	const slideshowImages = document.querySelectorAll('.slideshow-slide img');

	//Buttons

	const prevBtn = document.querySelector('#prevBtn');
	const nextBtn = document.querySelector('#nextBtn');

	//Counter
	let counter = 1;
	const size = slideshowImages\[0\].clientWidth;

	slideshowSlide.style.transform = 'translateX(' + (-size \* counter) + 'px)';

	//Button Listeners

	nextBtn.addEventListener('click',function(){
		if (counter >= slideshowImages.length-1) return;
		slideshowSlide.style.transition = 'transform 0.4s ease-in-out';
		counter++;
		slideshowSlide.style.transform = 'translateX(' + (-size \* counter) + 'px)';
	});

	prevBtn.addEventListener('click',function(){
		if (counter <= 0) return;
		slideshowSlide.style.transition = 'transform 0.4s ease-in-out';
		counter--;
		slideshowSlide.style.transform = 'translateX(' + (-size \* counter) + 'px)';
	});

	slideshowSlide.addEventListener('transitionend', ()=>{
		if (slideshowImages\[counter\].id === 'lastclone') {
			slideshowSlide.style.transition = "none";
			counter = slideshowImages.length - 2;
			slideshowSlide.style.transform = 'translateX(' + (-size \* counter) + 'px)';
		}
		if (slideshowImages\[counter\].id === 'firstclone') {
			slideshowSlide.style.transition = "none";
			counter = slideshowImages.length - counter;
			slideshowSlide.style.transform = 'translateX(' + (-size \* counter) + 'px)';
		}
	});

[Richard Deeming]

Unless the <img> element has an explicit width set, you'll need to wait for the images to finish loading before you can measure them. On the first page load, your script is probably running before the images have finished loading. On subsequent page loads, the images are probably being loaded from the cache, and finish loading before you script runs. There's a handy plugin for detecting when all images in a container have finished loading: GitHub - desandro/imagesloaded: JavaScript is all like "You images done yet or what?"[^]

---

"These people looked deep within my soul and assigned me a number based on the order in which I joined." - Homer

[Hypnonis]

Unfortunately it didn't help. I tried to set height and width of the images, tried to set the width of the images to 100% of the containers width and nothing helped. I used both CDN scripts from your link. I just realized that Mozilla Firefox is also displaying the slideshow bad. The images are way smaller and are all visible.