-
Notifications
You must be signed in to change notification settings - Fork 0
/
script.js
49 lines (39 loc) · 1.35 KB
/
script.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
/***** sidebar navigation */
const sidebarNavigationEl = document.getElementById(
"sidebar-container-navigation-id"
);
const sidebarOpenNavigationEl = document.getElementById("open-nav-sidebar");
const sidebarCloseNavigationEl = document.getElementById(
"sidebar-navigation-close"
);
// console.log(sidebarNavigationEl)
sidebarOpenNavigationEl.addEventListener("click", () => {
sidebarNavigationEl.classList.toggle("slidebar-show");
});
sidebarCloseNavigationEl.addEventListener("click", () => {
sidebarNavigationEl.classList.toggle("slidebar-show");
});
let slideBtnLeft = document.getElementById("slide-btn-left");
let slideBtnRight = document.getElementById("slide-btn-right");
let imgItem = document.querySelectorAll(".image-item");
// console.log(imgItem.length - 1);
let startSlider = 0;
let endSlider = (imgItem.length - 1) * 100; // 700
slideBtnLeft.addEventListener("click", handleLeftBtn);
function handleLeftBtn() {
if (startSlider < 0) {
startSlider = startSlider + 100;
}
imgItem.forEach((element) => {
element.style.transform = `translateX(${startSlider}%)`;
});
}
slideBtnRight.addEventListener("click", handleRightBtn);
function handleRightBtn() {
if (startSlider >= -endSlider + 100) {
startSlider = startSlider - 100;
}
imgItem.forEach((element) => {
element.style.transform = `translateX(${startSlider}%)`;
});
}