Вернуться к уроку

Карусель

важность: 4

Напишите «Карусель» – ленту изображений, которую можно листать влево-вправо нажатием на стрелочки.

В дальнейшем к ней можно легко добавить анимацию, динамическую подгрузку и другие возможности.

P.S. В этой задаче разработка HTML/CSS-структуры составляет 90% решения.

Открыть песочницу для задачи.

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

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

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

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

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

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

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

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

Открыть решение в песочнице.