Assignment3_work_with_sliders/scripts.js

// Clone the logos-slide and append it
var copy = document.querySelector(".logos-slide").cloneNode(true);
document.querySelector(".logos").appendChild(copy);

// Initialize Swiper instance
const swiper = new Swiper(".swiper-container", {
  slidesPerView: 1,
  spaceBetween: 10,
  pagination: {
    el: ".swiper-pagination",
    clickable: true,
  },
  navigation: {
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev",
  },
});

// Get all descriptions and pagination buttons
const descriptions = document.querySelectorAll(".project-description");
const paginationButtons = document.querySelectorAll(".pagination-button");
const images = document.querySelectorAll(".swiper-slide img"); // Select all images within slides

// Function to update the displayed content based on the current slide index
function updateContent(index) {
  // Hide all descriptions
  descriptions.forEach((desc) => {
    desc.classList.remove("active");
  });

  // Show the current description
  const selectedDescription = document.getElementById(`description-${index}`);
  if (selectedDescription) {
    selectedDescription.classList.add("active");
  }

  // Update pagination active class
  paginationButtons.forEach((button) => {
    button.classList.remove("active");
  });
  if (paginationButtons[index]) {
    paginationButtons[index].classList.add("active");
  }

  // Move Swiper to the corresponding slide
  swiper.slideTo(index);
}

// Listen for Swiper slide change event
swiper.on("slideChange", () => {
  const currentIndex = swiper.realIndex;
  updateContent(currentIndex);
});

// Event listeners for pagination buttons
paginationButtons.forEach((button, index) => {
  button.addEventListener("click", () => {
    updateContent(index); // Update content and slide
  });
});

// Event listeners for image clicks
images.forEach((image) => {
  image.addEventListener("click", (event) => {
    const index = parseInt(event.target.closest(".swiper-slide").getAttribute("data-index"), 10);
    updateContent(index); // Update content and slide
  });
});

// Initialize the content (first image and description are visible)
updateContent(swiper.realIndex);