36 lines
992 B
JavaScript
36 lines
992 B
JavaScript
|
let currentIndex = 0;
|
||
|
|
const carousel = document.getElementById('carousel');
|
||
|
|
const slides = carousel.children;
|
||
|
|
const totalSlides = slides.length;
|
||
|
|
const dots = document.querySelectorAll("[id^='dot-']");
|
||
|
|
|
||
|
|
// Update the carousel's position and the active pagination dot
|
||
|
|
function updateCarousel() {
|
||
|
|
carousel.style.transform = `translateX(-${currentIndex * 100}%)`;
|
||
|
|
dots.forEach((dot, index) => {
|
||
|
|
dot.classList.toggle('bg-gray-600', index === currentIndex);
|
||
|
|
dot.classList.toggle('bg-gray-400', index !== currentIndex);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
// Go to the next slide
|
||
|
|
function nextSlide() {
|
||
|
|
currentIndex = (currentIndex + 1) % totalSlides;
|
||
|
|
updateCarousel();
|
||
|
|
}
|
||
|
|
|
||
|
|
// Go to the previous slide
|
||
|
|
function prevSlide() {
|
||
|
|
currentIndex = (currentIndex - 1 + totalSlides) % totalSlides;
|
||
|
|
updateCarousel();
|
||
|
|
}
|
||
|
|
|
||
|
|
// Navigate to a specific slide
|
||
|
|
function goToSlide(index) {
|
||
|
|
currentIndex = index;
|
||
|
|
updateCarousel();
|
||
|
|
}
|
||
|
|
|
||
|
|
// Auto-slide functionality
|
||
|
|
setInterval(nextSlide, 5000); // Slide changes every 5 seconds
|