document.addEventListener("DOMContentLoaded", () => {
  const prevButtons = document.querySelectorAll("button.prev");
  const nextButtons = document.querySelectorAll("button.next");

  nextButtons.forEach((nextButton) => {
    nextButton.addEventListener("click", () => {
      const activePicture = nextButton
        .closest(".project-slideshow")
        .querySelector("picture.active");
      const targetPicture =
        activePicture.nextElementSibling &&
        activePicture.nextElementSibling.tagName === "PICTURE"
          ? activePicture.nextElementSibling
          : nextButton.closest(".project-slideshow").querySelector("picture");
      activePicture.classList.remove("active");
      targetPicture.classList.add("active");
    });
  });

  prevButtons.forEach((prevButton) => {
    prevButton.addEventListener("click", () => {
      const slideshow = prevButton.closest(".project-slideshow");
      const activePicture = slideshow.querySelector("picture.active");
      const pictures = [...slideshow.querySelectorAll("picture")];
      const targetPicture =
        activePicture.previousElementSibling &&
        activePicture.previousElementSibling.tagName === "PICTURE"
          ? activePicture.previousElementSibling
          : pictures[pictures.length - 1];
      activePicture.classList.remove("active");
      targetPicture.classList.add("active");
    });
  });
});