// Carousel functionality with infinite loop let currentSlide = 0; const carousel = document.getElementById('buildCarousel'); const items = carousel.querySelectorAll('.carousel-item'); const totalSlides = items.length; function updateCarousel() { // Remove active class from all items items.forEach(item => item.classList.remove('active')); // Add active class to current item items[currentSlide].classList.add('active'); // Calculate offset for centered carousel with visible adjacent items const itemWidth = 70; // percentage const offset = -currentSlide * itemWidth + 15; // 15% to center carousel.style.transform = `translateX(${offset}%)`; } function moveCarousel(direction) { // Calculate new slide index currentSlide += direction; // Loop around (infinite loop) if (currentSlide < 0) { currentSlide = totalSlides - 1; } else if (currentSlide >= totalSlides) { currentSlide = 0; } updateCarousel(); } // Initialize carousel updateCarousel(); // Auto-play carousel let autoplayInterval = setInterval(() => { moveCarousel(1); }, 5000); // Pause autoplay on hover carousel.parentElement.addEventListener('mouseenter', () => { clearInterval(autoplayInterval); }); carousel.parentElement.addEventListener('mouseleave', () => { autoplayInterval = setInterval(() => { moveCarousel(1); }, 5000); }); // Optional: Auto-play carousel // Uncomment the following lines if you want automatic sliding /* let autoplayInterval; function startAutoplay() { autoplayInterval = setInterval(() => { moveCarousel(1); }, 5000); // Change slide every 5 seconds } function stopAutoplay() { clearInterval(autoplayInterval); } // Start autoplay on load startAutoplay(); // Stop autoplay when user interacts with carousel carousel.addEventListener('mouseenter', stopAutoplay); carousel.addEventListener('mouseleave', startAutoplay); */ // Smooth scroll for anchor links document.querySelectorAll('a[href^="#"]').forEach(anchor => { anchor.addEventListener('click', function (e) { e.preventDefault(); const target = document.querySelector(this.getAttribute('href')); if (target) { target.scrollIntoView({ behavior: 'smooth', block: 'start' }); } }); });