You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
31 lines
1.1 KiB
31 lines
1.1 KiB
const sliderContainer = document.querySelector('.slider-container')
|
|
const slideRight = document.querySelector('.right-slide')
|
|
const slideLeft = document.querySelector('.left-slide')
|
|
const upButton = document.querySelector('.up-button')
|
|
const downButton = document.querySelector('.down-button')
|
|
const slidesLength = slideRight.querySelectorAll('div').length
|
|
|
|
let activeSlideIndex = 0
|
|
|
|
slideLeft.style.top = `-${(slidesLength - 1) * 100}vh`
|
|
|
|
upButton.addEventListener('click', () => changeSlide('up'))
|
|
downButton.addEventListener('click', () => changeSlide('down'))
|
|
|
|
const changeSlide = (direction) => {
|
|
const sliderHeight = sliderContainer.clientHeight
|
|
if(direction === 'up') {
|
|
activeSlideIndex++
|
|
if(activeSlideIndex > slidesLength - 1) {
|
|
activeSlideIndex = 0
|
|
}
|
|
} else if(direction === 'down') {
|
|
activeSlideIndex--
|
|
if(activeSlideIndex < 0) {
|
|
activeSlideIndex = slidesLength - 1
|
|
}
|
|
}
|
|
|
|
slideRight.style.transform = `translateY(-${activeSlideIndex * sliderHeight}px)`
|
|
slideLeft.style.transform = `translateY(${activeSlideIndex * sliderHeight}px)`
|
|
} |