document.addEventListener("DOMContentLoaded", function() { let currentSlide = 0; const track = document.getElementById("heroTrack"); const slides = document.querySelectorAll(".hero-slide"); const dotsBox = document.getElementById("heroDots"); if (track && slides.length > 0 && dotsBox) { dotsBox.innerHTML = ""; slides.forEach(function(_, i) { const dot = document.createElement("div"); dot.className = "hero-dot" + (i === 0 ? " active" : ""); dot.onclick = function() { goTo(i); }; dotsBox.appendChild(dot); }); const dots = document.querySelectorAll(".hero-dot"); function update() { track.style.transform = "translateX(-" + (currentSlide * 100) + "%)"; dots.forEach(function(dot) { dot.classList.remove("active"); }); if (dots[currentSlide]) { dots[currentSlide].classList.add("active"); } } window.nextSlide = function() { currentSlide = (currentSlide + 1) % slides.length; update(); }; window.prevSlide = function() { currentSlide = (currentSlide - 1 + slides.length) % slides.length; update(); }; function goTo(i) { currentSlide = i; update(); } setInterval(window.nextSlide, 9000); } });