Карусель
Створити “Карусель” – стрічку зображень, яку можна прокручувати, натискаючи на стрілки.
Надалі до неї можна буде додати анімацію, динамічне підвантаження та інші можливості.
P.S. У цьому завданні розробка структури HTML/CSS становить 90% рішення.
Стрічка зображень може бути представлена як список ul/li з картинками <img>.
Потрібно розташувати стрічку всередині <div> фіксованого розміру, так щоб одночасно була видна тільки потрібна частина списку:
Щоб список зробити горизонтальним, нам потрібно застосувати CSS-властивість display: inline-block для <li>.
Для тегу <img> ми також повинні налаштувати display, оскільки за умовчанням він є inline. У всіх елементах типу inline резервується додаткове місце під “хвости” символів. І щоб його забрати, нам потрібно прописати display:block.
Для прокручування будемо переміщати <ul>. Це можна робити по-різному, наприклад, призначенням CSS-властивості transform: translateX() (краще для продуктивності) або margin-left:
У зовнішнього <div> фіксована ширина, тому зайві зображення обрізаються.
Вся карусель – це самостійний «графічний компонент» на сторінці, таким чином нам краще його «обернути» в окремий <div class="carousel"> і вже модифікувати стилі всередині нього.