scripts.js

@@ -1,14 +1,27 @@
+// Clone the logos-slide and append it
 var copy = document.querySelector(".logos-slide").cloneNode(true);
 document.querySelector(".logos").appendChild(copy);
 
-// Get all images, descriptions, pagination buttons
-const images = document.querySelectorAll(".swiper-slide");
+// 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
 
-let currentIndex = 0; // Start with the first slide
-
-// Function to update the displayed content based on the current index
+// Function to update the displayed content based on the current slide index
 function updateContent(index) {
   // Hide all descriptions
   descriptions.forEach((desc) => {
@@ -25,24 +38,34 @@ function updateContent(index) {
   paginationButtons.forEach((button) => {
     button.classList.remove("active");
   });
-  paginationButtons[index].classList.add("active");
+  if (paginationButtons[index]) {
+    paginationButtons[index].classList.add("active");
+  }
+
+  // Move Swiper to the corresponding slide
+  swiper.slideTo(index);
 }
 
-// Event listeners for image clicks
-images.forEach((image, index) => {
-  image.addEventListener("click", () => {
-    currentIndex = index;
-    updateContent(currentIndex);
-  });
+// 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", () => {
-    currentIndex = index;
-    updateContent(currentIndex);
+    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(currentIndex);
+updateContent(swiper.realIndex);