text: 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)`
  }