84 lines
No EOL
3.9 KiB
JavaScript
84 lines
No EOL
3.9 KiB
JavaScript
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);
|
|
}); |