Vertical Slider is a project were you can flip the images vertically instead horizontally. For that reason the name.

The html has a fixed number of images which are loaded from Unsplash. There are two buttons. They are inside a div. Besides that, each one has its own div as you can see below:

      <div class="action-buttons">
        <button class="down-button">
          <i class="fas fa-arrow-down"></i>
        </button>
        <button class="up-button">
          <i class="fas fa-arrow-up"></i>
        </button>
      </div>

In the slider container is the responsable of make give the slider container fit only with one image. As we can read in the documentation:

The height and width properties are used to set the height and width of an element.

CSS Height, Width and Max-width – w3schools

The buttons tagged as up and down are selected by the JavaScript and added an event listener:

const upButton = document.querySelector('.up-button')
const downButton = document.querySelector('.down-button')

upButton.addEventListener('click', () => changeSlide('up'))
downButton.addEventListener('click', () => changeSlide('down'))

Each time the event is clicked the function ChangeSlide the index adding or substracting depending if the user click the up arrow or the down arrow.

You can see the code in this GitHub Repository: 26.vertical_slider and the demo of the project is here: Vertical Slider