1.6 KiB
Лента изображений в разметке должна быть представлена как список <ul> тегов <img>.
Нужно расположить его внутри <div> фиксированного размера, так чтобы в один момент была видна только нужная часть списка:
Чтобы список был длинный и элементы не переходили вниз, ему ставится width: 9999px, а элементам <li>, соответственно, float:left, либо для элементов используется display: inline-block, как в этом решении.
Главное -- не использовать display:inline, так как такие элементы имеют дополнительные отступы снизу для возможных "хвостов букв".
В частности, для <img> нужно поставить в стилях явно display:block, чтобы пространства под ними не оставалось.
Для "прокрутки" будем сдвигать <ul>. Это можно делать по-разному, например, назначением CSS-свойства transform: translateX() или margin-left:
У внешнего <div> фиксированная ширина, поэтому "лишние" изображения обрезаются.
Снаружи окошка находятся стрелки и внешний контейнер.