const imageUrls1 = ["/wp-content/themes/rollikids/images/header_slider/box1/IMG_20220519_104858_resized.png", "/wp-content/themes/rollikids/images/header_slider/box1/IMG_5003_resized.png", "/wp-content/themes/rollikids/images/header_slider/box1/signal-2022-05-18-18-19-07-145_resized.png"];
const imageUrls2 = ["/wp-content/themes/rollikids/images/header_slider/box2/1687248048578_resized.png", "/wp-content/themes/rollikids/images/header_slider/box2/1687248859476_resized.png", "/wp-content/themes/rollikids/images/header_slider/box2/1687442744995_resized.png"];
const imageUrls3 = ["/wp-content/themes/rollikids/images/header_slider/box3/1687247852962_resized.png", "/wp-content/themes/rollikids/images/header_slider/box3/1687247852981 - Kopie_resized.png", "/wp-content/themes/rollikids/images/header_slider/box3/1687247853062_resized.png"];

let start = 0
console.log (Math.random()*imageUrls1.length)
let currentIndex1 = Math.floor(Math.random()*imageUrls1.length);
let currentIndex2 = Math.floor(Math.random()*imageUrls2.length);
let currentIndex3 = Math.floor(Math.random()*imageUrls3.length);

// Funktion zum Aktualisieren der Bildquelle mit Übergangseffekt
function updateImage() {
	const imageElement1 = document.getElementById("image1");
	const imageElement2 = document.getElementById("image2");
	const imageElement3 = document.getElementById("image3");
	if (start === 0) {
		imageElement1.src = imageUrls1[currentIndex1];
		imageElement2.src = imageUrls2[currentIndex2];
		imageElement3.src = imageUrls3[currentIndex3];
		start = 1;
	} else {
		imageElement1.style.opacity = 0; // Setze die Opazität auf 0 (Fade-Out)
		imageElement2.style.opacity = 0;
		imageElement3.style.opacity = 0;
		setTimeout(() => {
			imageElement1.src = imageUrls1[currentIndex1];
			imageElement2.src = imageUrls2[currentIndex2];
			imageElement3.src = imageUrls3[currentIndex3];
			imageElement1.style.opacity = 1; // Setze die Opazität auf 1 (Fade-In)
			imageElement2.style.opacity = 1;
			imageElement3.style.opacity = 1;
			currentIndex1 = (currentIndex1 + 1) % imageUrls1.length;
			currentIndex2 = (currentIndex2 + 1) % imageUrls2.length;
			currentIndex3 = (currentIndex3 + 1) % imageUrls3.length;
		}, 500); // Warte 0,5 Sekunden, bevor das Bild aktualisiert wird
	}
}

// Rufe die updateImage-Funktion sofort auf, um das erste Bild anzuzeigen
window.onload = function() {
    updateImage();
};


// Rufe die updateImage-Funktion alle 3 Sekunden auf
setInterval(updateImage, 10000);