Карусель

Ми хочемо зробити цей проєкт з відкритим кодом доступним для людей у всьому світі.

Допоможіть перекласти цей підручник вашою мовою!

КупитиEPUB/PDF
Навчальна карта
назад до уроку

Карусель

Створити “Карусель” – стрічку зображень, яку можна прокручувати, натискаючи на стрілки.

Надалі до неї можна буде додати анімацію, динамічне підвантаження та інші можливості.

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"> і вже модифікувати стилі всередині нього.

Відкрити рішення в пісочниці.