Create script.js

script.js

@@ -0,0 +1,88 @@
+// 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'
+            });
+        }
+    });
+});