-
Notifications
You must be signed in to change notification settings - Fork 0
/
app.js
79 lines (63 loc) · 2.72 KB
/
app.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
79
const list = document.querySelector(".gallery-carousel__img-container--list");
const imgs = Array.from(list.children);
const nextButton = document.querySelector(".gallery-carousel__btn--right");
const prevButton = document.querySelector(".gallery-carousel__btn--left");
const carouselNav = document.querySelector(".gallery-carousel__nav");
const dots = Array.from(carouselNav.children);
const imgWidth = imgs[0].getBoundingClientRect().width;
const setImgPosition = (img, index) => {
img.style.left = imgWidth * index + "px";
};
imgs.forEach(setImgPosition);
const moveToImg = (list, currentImg, targetImg) => {
list.style.transform = "translateX(-" + targetImg.style.left + ")";
currentImg.classList.remove("current--img");
targetImg.classList.add("current--img");
};
const updateDots = (currentDot, targetDot) => {
currentDot.classList.remove("current--img");
targetDot.classList.add("current--img");
};
const hideShowArrows = (imgs, prevButton, nextButton, targetIndex) => {
if (targetIndex === 0) {
prevButton.classList.add("hidden");
nextButton.classList.remove("hidden");
} else if (targetIndex === imgs.length - 1) {
prevButton.classList.remove("hidden");
nextButton.classList.add("hidden");
} else {
prevButton.classList.remove("hidden");
nextButton.classList.remove("hidden");
}
};
nextButton.addEventListener("click", (e) => {
const currentImg = list.querySelector(".current--img");
const nextImg = currentImg.nextElementSibling;
const currentDot = carouselNav.querySelector(".current--img");
const nextDot = currentDot.nextElementSibling;
const nextIndex = imgs.findIndex((img) => img === nextImg);
moveToImg(list, currentImg, nextImg);
updateDots(currentDot, nextDot);
hideShowArrows(imgs, prevButton, nextButton, nextIndex);
});
prevButton.addEventListener("click", (e) => {
const currentImg = list.querySelector(".current--img");
const prevImg = currentImg.previousElementSibling;
const currentDot = carouselNav.querySelector(".current--img");
const prevDot = currentDot.previousElementSibling;
const prevIndex = imgs.findIndex((img) => img === prevImg);
moveToImg(list, currentImg, prevImg);
updateDots(currentDot, prevDot);
hideShowArrows(imgs, prevButton, nextButton, prevIndex);
});
carouselNav.addEventListener("click", (e) => {
const targetDot = e.target.closest("button");
if (!targetDot) return;
const currentImg = list.querySelector(".current--img");
const currentDot = carouselNav.querySelector(".current--img");
const targetIndex = dots.findIndex((dot) => dot === targetDot);
const targetImg = imgs[targetIndex];
moveToImg(list, currentImg, targetImg);
updateDots(currentDot, targetDot);
hideShowArrows(imgs, prevButton, nextButton, targetIndex);
});