-
Notifications
You must be signed in to change notification settings - Fork 0
/
carousel.js
40 lines (34 loc) · 1.11 KB
/
carousel.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
document.addEventListener("DOMContentLoaded", function () {
const carousel = document.getElementById("carousel");
const images = carousel.querySelectorAll("img");
let currentIndex = 0;
function updateCarousel() {
const offset = -currentIndex * images[currentIndex].width; // Use the width of the current image
carousel.style.transform = `translateX(${offset}px)`;
}
function nextSlide() {
currentIndex = (currentIndex + 1) % images.length;
updateCarousel();
}
function startCarousel() {
setInterval(nextSlide, 3000); // Change slide every 3 seconds
}
function resizeImages() {
images.forEach(img => {
img.style.width = "400px"; // Fixed width for each image
});
}
// Ensure images are loaded before resizing and starting the carousel
let imagesLoaded = 0;
images.forEach(img => {
img.addEventListener("load", function () {
imagesLoaded++;
if (imagesLoaded === images.length) {
resizeImages();
startCarousel();
}
});
});
// Resize images when the window is resized
window.addEventListener("resize", resizeImages);
});