first commit

js/carousel.js

@@ -0,0 +1,84 @@
+document.addEventListener('DOMContentLoaded', () => {
+    // Generic function to handle the carousel logic
+    function initializeCarousel(currentImgEl, nextImgEl, imageArray) {
+        if (!currentImgEl || !nextImgEl) {
+            return; // If the elements aren't on this page, do nothing
+        }
+
+        currentImgEl.classList.add('opacity-0');
+        currentImgEl.style.animation = "fadeInRight 1s ease-out 0.3s forwards";
+
+        let currentIndex = 0;
+        let isTransitioning = false;
+        const slideDirections = ["left", "right"];
+        let slideIndex = 0;
+
+        function performSlideZoomTransition() {
+            if (isTransitioning) return;
+            isTransitioning = true;
+            const nextIndex = (currentIndex + 1) % imageArray.length;
+            const slideDirection = slideDirections[slideIndex % slideDirections.length];
+            slideIndex++;
+
+            nextImgEl.src = imageArray[nextIndex];
+            nextImgEl.style.opacity = "1";
+
+            if (slideDirection === "left") {
+                currentImgEl.style.animation = "slideOutLeft 1s ease-in-out forwards";
+                nextImgEl.style.animation = "zoomInFromRight 1s ease-in-out forwards";
+            } else {
+                currentImgEl.style.animation = "slideOutRight 1s ease-in-out forwards";
+                nextImgEl.style.animation = "zoomInFromLeft 1s ease-in-out forwards";
+            }
+
+            setTimeout(() => {
+                // The animation has finished. The 'nextImg' is now fully visible on top.
+                // The 'currentImg' is now hidden behind it, having completed its slide-out.
+
+                // 1. Reset the OLD current image. It will become the 'next' image container for the next cycle.
+                //    Clear its animation and explicitly hide it.
+                currentImgEl.style.animation = "";
+                currentImgEl.style.opacity = "0"; // Force it to be hidden
+
+                // 2. The 'next' image now becomes the 'current' image.
+                //    We need to update its properties to be the new baseline.
+                nextImgEl.style.animation = ""; // Clear its 'zoomIn' animation
+                nextImgEl.style.opacity = "1";  // Ensure it is and stays visible
+
+                // 3. Swap their IDs in the DOM. This is the key to the new logic.
+                //    The element that was 'nextImg' is now officially 'currentImg'.
+                let tempId = currentImgEl.id;
+                currentImgEl.id = nextImgEl.id;
+                nextImgEl.id = tempId;
+
+                // 4. Re-assign our script's variables to point to the newly ID'd elements.
+                currentImgEl = document.getElementById('currentImg');
+                nextImgEl = document.getElementById('nextImg');
+
+                // 5. Update the index and state.
+                currentIndex = nextIndex;
+                isTransitioning = false;
+            }, 1000);
+        }
+
+        // Start the transition cycle after initial page animations
+        setTimeout(() => {
+            setInterval(performSlideZoomTransition, 5000);
+        }, 2000);
+    }
+
+    // --- Carousel Definitions ---
+    // IDs for the index page carousel
+    const indexCurrentImg = document.getElementById("currentImg");
+    const indexNextImg = document.getElementById("nextImg");
+    const indexImgs = ["assets/images/room.webp", "assets/images/chair.webp", "assets/images/google.webp"];
+
+    // IDs for the services page carousel
+    const servicesCurrentImg = document.getElementById("servicesCurrentImg");
+    const servicesNextImg = document.getElementById("servicesNextImg");
+    const servicesImgs = ["assets/images/room.webp", "assets/images/chair.webp", "assets/images/google.webp"];
+
+    // Initialize the carousels for any page that has the correct elements
+    initializeCarousel(indexCurrentImg, indexNextImg, indexImgs);
+    initializeCarousel(servicesCurrentImg, servicesNextImg, servicesImgs);
+});