script.js

const slides = document.querySelectorAll(".photogrid img");
let slideIndex = 0;
let intervalId = null;

initializePhotos();
function initializePhotos() {
  slides[slideIndex].classList.add("displaySlide");
  intervalId = setInterval(nextSlide, 5000);

  slides.forEach((slide) => {
    slide.addEventListener("mouseenter", pauseSlide);
    slide.addEventListener("mouseleave", resumeSlide);
  });
}
function pauseSlide() {
  clearInterval(intervalId);
}
function resumeSlide() {
  intervalId = setInterval(nextSlide, 5000);
}

function showSlide(index) {
  if (index >= slides.length) {
    slideIndex = 0;
  }
  if (index < 0) {
    slideIndex = slides.length - 1;
  }

  slides.forEach((slide) => {
    slide.classList.remove("displaySlide");
  });
  slides[slideIndex].classList.add("displaySlide");
}
function prevSlide() {
  slideIndex--;
  showSlide(slideIndex);
}
function nextSlide() {
  slideIndex++;
  showSlide(slideIndex);
}