function2.js

document.addEventListener("DOMContentLoaded", () => {
  let slideIndex = 1;
  showSlides(slideIndex);

  // Go to next or previous slide
  window.plusSlides = function(n) {
    showSlides(slideIndex += n);
  };

  // Go to a specific slide
  window.currentSlide = function(n) {
    showSlides(slideIndex = n);
  };

  function showSlides(n) {
    const slides = document.getElementsByClassName("mySlides");
    const dots = document.getElementsByClassName("dot");

    // if no slides exist, stop
    if (!slides.length) {
      console.error("No slides found with class 'mySlides'");
      return;
    }

    // Loop back if out of range
    if (n > slides.length) slideIndex = 1;
    if (n < 1) slideIndex = slides.length;

    // Hide all slides
    for (let i = 0; i < slides.length; i++) {
      slides[i].style.display = "none";
    }

    // Remove 'active' class from all dots
    for (let i = 0; i < dots.length; i++) {
      dots[i].classList.remove("active");
    }

    // Show the correct slide
    slides[slideIndex - 1].style.display = "block";

    // Highlight the correct dot (if it exists)
    if (dots[slideIndex - 1]) dots[slideIndex - 1].classList.add("active");
  }
});