# HTML/CSS
Лента изображений должна быть оформлена как список, согласно принципам семантической вёрстки.

Нужно стилизовать его так, чтобы он был длинной лентой, из которой внешний `DIV` вырезает нужную часть для просмотра:

<img src="carousel1.png">

Чтобы список был длинный и элементы не переходили вниз, ему ставится `width: 9999px`, а элементам, соответственно, `float:left`.

[warn header="Не используйте display:inline"]
Элементы с `display:inline` имеют дополнительные отступы для возможных "хвостов букв".

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

При прокрутке UL сдвигается назначением `margin-left`:

<img src="carousel2.png">

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

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

Реализуйте эту структуру, и к ней прикручивайте обработчики, которые меняют `ul.style.marginLeft`.

# Полное решение

[edit src="solution"]Открыть в песочнице[/edit]