-
Notifications
You must be signed in to change notification settings - Fork 0
/
script.js
44 lines (32 loc) · 1.19 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
// Cool vertical slider with JavaScript || by Sami
// you can download it, and used in your website, it's free
const upBtn = document.querySelector(".up-button");
const downBtn = document.querySelector(".down-button");
const sidebar = document.querySelector(".sidebar");
const mainSlade = document.querySelector(".main-slide");
const slidesCout = mainSlade.querySelectorAll("div").length;
const container = document.querySelector(".container");
sidebar.style.top = `-${(slidesCout - 1) * 100}vh`;
let activeSlideIndex = 0;
upBtn.addEventListener("click", () => {
changeSlide("up");
});
downBtn.addEventListener("click", () => {
changeSlide("down");
});
function changeSlide(direction) {
if (direction === "up") {
activeSlideIndex++;
if (activeSlideIndex === slidesCout) {
activeSlideIndex = 0;
}
} else if (direction === "down") {
activeSlideIndex--;
if (activeSlideIndex < 0) {
activeSlideIndex = slidesCout -1;
}
}
const height = container.clientHeight;
mainSlade.style.transform = `translateY(-${activeSlideIndex * height}px)`;
sidebar.style.transform = `translateY(${activeSlideIndex * height}px)`;
}