.slideshow-container { position: relative; } .slideshow { display: flex; } .slideshow img { max-width: 100%; height: auto; opacity: 0; transition: opacity 1s ease-in-out; } .slideshow img.active { opacity: 1; } .progress-bar { position: absolute; bottom: 0; left: 0; height: 5px; background-color: #ccc; width: 0; transition: width 1s ease-in-out; } var slides = document.querySelectorAll(".slideshow img"); var progressBar = document.querySelector(".progress-bar"); var currentIndex = 0; var interval; function startSlideshow() { interval = setInterval(function() { currentIndex++; if (currentIndex >= slides.length) { currentIndex = 0; } updateSlide(currentIndex); }, 3000); } function updateSlide(index) { for (var i = 0; i < slides.length; i++) { slides[i].classList.remove("active"); } slides[index].classList.add("active"); var percent = ((index + 1) / slides.length) * 100; progressBar.style.width = percent + "%"; } startSlideshow(); progressBar.addEventListener("click", function(event) { var width = this.offsetWidth; var clickedX = event.offsetX; var percent = (clickedX / width) * 100; var index = Math.floor((percent / 100) * slides.length); currentIndex = index; updateSlide(index); });