document.addEventListener("DOMContentLoaded", function () {
const container = document.querySelector(".carousel-container");
const slides = document.querySelectorAll(".carousel-slide");
const prevButton = document.querySelector(".carousel-prev");
const nextButton = document.querySelector(".carousel-next");
const dotsContainer = document.querySelector(".carousel-dots");
let currentIndex = 0;
// Create dots
slides.forEach((_, index) => {
const dot = document.createElement("button");
if (index === 0) dot.classList.add("active");
dot.addEventListener("click", () => goToSlide(index));
dotsContainer.appendChild(dot);
});
const dots = dotsContainer.querySelectorAll("button");
function updateCarousel() {
const offset = -currentIndex * 100; // Move the carousel left by the width of one slide
container.style.transform = `translateX(${offset}%)`; // Apply the transition
dots.forEach((dot, index) => {
dot.classList.toggle("active", index === currentIndex); // Update active dot
});
}
function goToSlide(index) {
currentIndex = index;
updateCarousel();
}
function goToNextSlide() {
currentIndex = (currentIndex < slides.length - 1) ? currentIndex + 1 : 0;
updateCarousel();
}
function goToPrevSlide() {
currentIndex = (currentIndex > 0) ? currentIndex - 1 : slides.length - 1;
updateCarousel();
}
// Add event listeners for arrows
prevButton.addEventListener("click", () => {
goToPrevSlide();
});
nextButton.addEventListener("click", () => {
goToNextSlide();
});
});
