Carousel
Create a “carousel” – a ribbon of images that can be scrolled by clicking on arrows.
Later we can add more features to it: infinite scrolling, dynamic loading etc.
P.S. For this task HTML/CSS structure is actually 90% of the solution.
The images ribbon can be represented as ul/li list of images <img>.
Normally, such a ribbon is wide, but we put a fixed-size <div> around to “cut” it, so that only a part of the ribbon is visible:
To make the list show horizontally we need to apply correct CSS properties for <li>, like display: inline-block.
For <img> we should also adjust display, because by default it’s inline. There’s extra space reserved under inline elements for “letter tails”, so we can use display:block to remove it.
To do the scrolling, we can shift <ul>. There are many ways to do it, for instance by changing margin-left or (better performance) use transform: translateX():
The outer <div> has a fixed width, so “extra” images are cut.
The whole carousel is a self-contained “graphical component” on the page, so we’d better wrap it into a single <div class="carousel"> and style things inside it.