-
Notifications
You must be signed in to change notification settings - Fork 0
/
app.js
40 lines (30 loc) · 1.1 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
const upBtn = document.querySelector('.up-button');
const downBtn = document.querySelector('.down-button');
const container = document.querySelector('.container');
const mainSlide = document.querySelector('.main-slide');
const sidebar = document.querySelector('.sidebar');
var slidesCount = mainSlide.querySelectorAll('div').length;
let activeSlideIndex = 0;
sidebar.style.top = `-${(slidesCount - 1) * 100}vh`;
upBtn.addEventListener('click', () => {
changeSlide('up');
});
downBtn.addEventListener('click', () => {
changeSlide('down');
});
function changeSlide(direction) {
if(direction === 'up') {
activeSlideIndex = (activeSlideIndex + 1) % slidesCount;
}
else if(direction === 'down') {
--activeSlideIndex;
if(activeSlideIndex < 0) {
activeSlideIndex = slidesCount - 1;
}
}
console.log(activeSlideIndex);
const height = container.clientHeight;
const translateHeight = activeSlideIndex * height;
mainSlide.style.transform = `translateY(-${translateHeight}px)`;
sidebar.style.transform = `translateY(${translateHeight}px)`;
}