https://learn.javascript.ru/introduction-browser-events
В дальнейшем к ней можно легко добавить анимацию, динамическую подгрузку и другие возможности.
P.S. В этой задаче разработка HTML/CSS-структуры составляет 90% решения.
Лента изображений в разметке должна быть представлена как список
- тегов
- , соответственно,
float:left, либо для элементов используется display: inline-block, как в этом решении.
Главное – не использовать display:inline, так как такие элементы имеют дополнительные отступы снизу для возможных «хвостов букв».
В частности, для
нужно поставить в стилях явно display:block, чтобы пространства под ними не оставалось.
Для «прокрутки» будем сдвигать
- . Это можно делать по-разному, например, назначением CSS-свойства transform: translateX() или margin-left:
У внешнего
фиксированная ширина, поэтому «лишние» изображения обрезаются.Снаружи окошка находятся стрелки и внешний контейнер.
Нужно расположить его внутри
фиксированного размера, так чтобы в один момент была видна только нужная часть списка:
Чтобы список был длинный и элементы не переходили вниз, ему ставится width: 9999px, а элементам