const images = ["https://cdn02.plentymarkets.com/fzraxqjvapo5/frontend/s3/files/banner/annakova/anna-k-1.jpg","https://cdn02.plentymarkets.com/fzraxqjvapo5/frontend/s3/files/banner/annakova/anna-k-2.jpg"]; let currentIndex = 0; const currentImg = document.querySelector('.anna-k-hero img.current'); const nextImg = document.querySelector('.anna-k-hero img.next'); function transitionToNextImage() { const nextIndex = (currentIndex + 1) % images.length; nextImg.src = images[nextIndex]; // Reset active class in case it's still present nextImg.classList.remove('active'); void nextImg.offsetWidth; // Starte Animation nextImg.classList.add('active'); // Nach der Animation: setTimeout(() => { // 1. Zeige neues Bild dauerhaft in .current currentImg.src = images[nextIndex]; // 2. Verstecke next wieder, OHNE sichtbaren Reset nextImg.classList.remove('active'); nextImg.src = ""; // oder dummy transparent image // 3. Index aktualisieren currentIndex = nextIndex; }, 2000); } setInterval(transitionToNextImage, 5000); /* console.log("NEW CODE") let currentIndex = 0; const currentImg = document.querySelector('.anna-k-hero img.current'); const nextImg = document.querySelector('.anna-k-hero img.next'); function transitionToNextImage() { currentIndex = (currentIndex + 1) % images.length; nextImg.src = images[currentIndex]; // Starte Animation nextImg.classList.add('active'); // Nach der Animation: Setze current-Bild neu, aber LASS active stehen! setTimeout(() => { nextImg.classList.remove('active'); currentImg.src = images[currentIndex]; }, 5000); } setInterval(transitionToNextImage, 5000); */ /* let currentIndex = 0; const currentImg = document.querySelector('.anna-k-hero img.current'); const nextImg = document.querySelector('.anna-k-hero img.next'); function transitionToNextImage() { currentIndex = (currentIndex + 1) % images.length; nextImg.src = images[currentIndex]; nextImg.classList.add('active'); setTimeout(() => { currentImg.src = images[currentIndex]; nextImg.classList.remove('active'); }, 2000); // matches the CSS transition time } setInterval(transitionToNextImage, 5000); // 5 seconds per image */

Was ist im Sale?