Лента изображений в разметке должна быть представлена как список `<ul>` тегов `<img>`.

Нужно расположить его внутри `<div>` фиксированного размера, так чтобы в один момент была видна только нужная часть списка:

<img src="carousel1.svg">

Чтобы список был длинный и элементы не переходили вниз, ему ставится `width: 9999px`, а элементам `<li>`, соответственно, `float:left`, либо для элементов используется `display: inline-block`, как в этом решении.

Главное -- не использовать `display:inline`, так как такие элементы имеют дополнительные отступы снизу для возможных "хвостов букв".

В частности, для `<img>` нужно поставить в стилях явно `display:block`, чтобы пространства под ними не оставалось.

Для "прокрутки" будем сдвигать `<ul>`. Это можно делать по-разному, например, назначением CSS-свойства `transform: translateX()` или `margin-left`:

<img src="carousel2.svg">

У внешнего `<div>` фиксированная ширина, поэтому "лишние" изображения обрезаются.

Снаружи окошка находятся стрелки и внешний контейнер.