SGGSCOP

document.addEventListener("DOMContentLoaded", function () { let slideIndex = 0; const slides = document.querySelectorAll(".slide"); const dots = document.querySelectorAll(".dot"); const prevButton = document.querySelector(".prev"); const nextButton = document.querySelector(".next"); function showSlide(index) { slides.forEach((slide, i) => { slide.classList.toggle("active", i === index); dots[i].classList.toggle("active", i === index); }); } function changeSlide(step) { slideIndex = (slideIndex + step + slides.length) % slides.length; showSlide(slideIndex); } function goToSlide(index) { slideIndex = index; showSlide(slideIndex); } // Event listeners for navigation buttons prevButton.addEventListener("click", () => changeSlide(-1)); nextButton.addEventListener("click", () => changeSlide(1)); // Event listeners for dots navigation dots.forEach((dot, index) => { dot.addEventListener("click", () => goToSlide(index)); }); // Auto-play slides every 5 seconds setInterval(() => changeSlide(1), 5000); // Initialize first slide showSlide(slideIndex); });