-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.js
57 lines (45 loc) · 1.18 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
const imageContainerEl = document.querySelector(".image-container");
const prevEl = document.getElementById("prev");
const nextEl = document.getElementById("next");
const imageContainerEl2 = document.querySelector(".image-container-2");
const prevEl2 = document.getElementById("prev2");
const nextEl2 = document.getElementById("next2");
let x = 0;
let x2 = 0;
let timer,timer2;
prevEl.addEventListener("click", () => {
x = x + 45;
clearTimeout(timer);
updateGallery();
});
nextEl.addEventListener("click", () => {
x = x - 45;
clearTimeout(timer);
updateGallery();
});
prevEl2.addEventListener("click", () => {
x2 = x2 - 45;
clearTimeout(timer2);
updateGallery2();
});
nextEl2.addEventListener("click", () => {
x2 = x2 + 45;
clearTimeout(timer2);
updateGallery2();
});
function updateGallery() {
imageContainerEl.style.transform = `perspective(1000px) rotateY(${x}deg)`;
timer = setTimeout(() => {
x = x - 45;
updateGallery();
}, 3000);
}
function updateGallery2() {
imageContainerEl2.style.transform = `perspective(1000px) rotateY(${x2}deg)`;
timer2 = setTimeout(() => {
x2 = x2 + 45;
updateGallery2();
}, 3700);
}
updateGallery2();
updateGallery();