Update script.js
Browse files
script.js
CHANGED
|
@@ -1,78 +1,3 @@
|
|
| 1 |
-
// Carousel functionality with infinite loop
|
| 2 |
-
let currentSlide = 0;
|
| 3 |
-
const carousel = document.getElementById('buildCarousel');
|
| 4 |
-
const items = carousel.querySelectorAll('.carousel-item');
|
| 5 |
-
const totalSlides = items.length;
|
| 6 |
-
|
| 7 |
-
function updateCarousel() {
|
| 8 |
-
// Remove active class from all items
|
| 9 |
-
items.forEach(item => item.classList.remove('active'));
|
| 10 |
-
|
| 11 |
-
// Add active class to current item
|
| 12 |
-
items[currentSlide].classList.add('active');
|
| 13 |
-
|
| 14 |
-
// Calculate offset for centered carousel with visible adjacent items
|
| 15 |
-
const itemWidth = 70; // percentage
|
| 16 |
-
const offset = -currentSlide * itemWidth + 15; // 15% to center
|
| 17 |
-
carousel.style.transform = `translateX(${offset}%)`;
|
| 18 |
-
}
|
| 19 |
-
|
| 20 |
-
function moveCarousel(direction) {
|
| 21 |
-
// Calculate new slide index
|
| 22 |
-
currentSlide += direction;
|
| 23 |
-
|
| 24 |
-
// Loop around (infinite loop)
|
| 25 |
-
if (currentSlide < 0) {
|
| 26 |
-
currentSlide = totalSlides - 1;
|
| 27 |
-
} else if (currentSlide >= totalSlides) {
|
| 28 |
-
currentSlide = 0;
|
| 29 |
-
}
|
| 30 |
-
|
| 31 |
-
updateCarousel();
|
| 32 |
-
}
|
| 33 |
-
|
| 34 |
-
// Initialize carousel
|
| 35 |
-
updateCarousel();
|
| 36 |
-
|
| 37 |
-
// Auto-play carousel
|
| 38 |
-
let autoplayInterval = setInterval(() => {
|
| 39 |
-
moveCarousel(1);
|
| 40 |
-
}, 5000);
|
| 41 |
-
|
| 42 |
-
// Pause autoplay on hover
|
| 43 |
-
carousel.parentElement.addEventListener('mouseenter', () => {
|
| 44 |
-
clearInterval(autoplayInterval);
|
| 45 |
-
});
|
| 46 |
-
|
| 47 |
-
carousel.parentElement.addEventListener('mouseleave', () => {
|
| 48 |
-
autoplayInterval = setInterval(() => {
|
| 49 |
-
moveCarousel(1);
|
| 50 |
-
}, 5000);
|
| 51 |
-
});
|
| 52 |
-
|
| 53 |
-
// Optional: Auto-play carousel
|
| 54 |
-
// Uncomment the following lines if you want automatic sliding
|
| 55 |
-
/*
|
| 56 |
-
let autoplayInterval;
|
| 57 |
-
|
| 58 |
-
function startAutoplay() {
|
| 59 |
-
autoplayInterval = setInterval(() => {
|
| 60 |
-
moveCarousel(1);
|
| 61 |
-
}, 5000); // Change slide every 5 seconds
|
| 62 |
-
}
|
| 63 |
-
|
| 64 |
-
function stopAutoplay() {
|
| 65 |
-
clearInterval(autoplayInterval);
|
| 66 |
-
}
|
| 67 |
-
|
| 68 |
-
// Start autoplay on load
|
| 69 |
-
startAutoplay();
|
| 70 |
-
|
| 71 |
-
// Stop autoplay when user interacts with carousel
|
| 72 |
-
carousel.addEventListener('mouseenter', stopAutoplay);
|
| 73 |
-
carousel.addEventListener('mouseleave', startAutoplay);
|
| 74 |
-
*/
|
| 75 |
-
|
| 76 |
// Smooth scroll for anchor links
|
| 77 |
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
| 78 |
anchor.addEventListener('click', function (e) {
|
|
@@ -85,4 +10,4 @@ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
|
| 85 |
});
|
| 86 |
}
|
| 87 |
});
|
| 88 |
-
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
// Smooth scroll for anchor links
|
| 2 |
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
| 3 |
anchor.addEventListener('click', function (e) {
|
|
|
|
| 10 |
});
|
| 11 |
}
|
| 12 |
});
|
| 13 |
+
});
|