-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.js
78 lines (56 loc) · 1.74 KB
/
index.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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
let currentIndex = 0;
const images = document.querySelectorAll(".image-container img");
const visibleImages = 2;
let currentIteration = 0;
let autoplayInterval;
function changeSlide(direction) {
console.log(direction);
if (direction === 1) {
currentIndex += 2;
} else if (direction === -1) {
currentIndex -= 2;
}
if (currentIndex < 0) {
currentIndex = images.length - 2;
} else if (currentIndex >= images.length) {
currentIndex = 0;
currentIteration++;
}
images.forEach((image) => {
image.style.display = "none";
});
for (let i = 0; i < visibleImages; i++) {
const index = (currentIndex + i) % images.length;
images[index].style.display = "block";
}
}
function startAutoplay() {
clearInterval(autoplayInterval);
autoplayInterval = setInterval(() => {
changeSlide(1);
}, 1000);
}
function pauseAutoplay() {
clearInterval(autoplayInterval);
}
images.forEach((image) => {
image.addEventListener("mouseover", pauseAutoplay);
image.addEventListener("mouseout", startAutoplay);
});
const leftArrow = document.querySelector(".left-arrow");
const rightArrow = document.querySelector(".right-arrow");
leftArrow.addEventListener("mouseover", pauseAutoplay);
leftArrow.addEventListener("mouseout", startAutoplay);
rightArrow.addEventListener("mouseover", pauseAutoplay);
rightArrow.addEventListener("mouseout", startAutoplay);
document.addEventListener("keydown", (event) => {
if (event.key === "ArrowLeft") {
changeSlide(-1);
} else if (event.key === "ArrowRight") {
changeSlide(1);
}
});
// Start autoplay initially
startAutoplay();
// Initialize the slideshow
changeSlide(0);