How do I create arrows to scroll to the next video when clicked? HTML, CSS and Javascript specific

Question

How do I achieve the above effect where, when I click the respective arrows it will scroll to reveal the next video?

I don't have any code to show, this is all for a school project and now I have to make a website based on the wireframes I came up with. I've seen this effect on a couple sites but i'm unsure on how to implement it. Can't take back the wireframes I've submitted. Please help. The videos page is the only bit of my 5 page wireframes that I'm stumped on.

Answer 1

What you are trying to do is called a vertical carousel. Try to google something like "vertical image carousel html".

I was able to find some advanced Infinite rotating carousel with 100 list items (#cpc-100-list) with good link in comment

<!-- Inspired by: https://3dtransforms.desandro.com/carousel -->

and Infinite Carousel with Pure CSS and JS (ELEMENTS)

Or a simpler one, already asked on Stack