Узнайте, как создать галерею изображений с горизонтальной полосой прокрутки используя HTML, CSS.
Галерея изображений с горизонтальной прокруткой
Используйте горизонтальную полосу прокрутки, чтобы увидеть другие изображения:
Создайте галерею изображений с горизонтальной прокруткой
Шаг 1) Добавить HTML:
<div class="scroll-container">
<img src="img_5terre.jpg" alt="Чинкве-Терре
">
<img src="img_forest.jpg" alt="Лес">
<img
src="img_lights.jpg" alt="Северное сияние">
<img
src="img_mountains.jpg" alt="Горы">
</div>
Шаг 2) Добавить CSS:
div.scroll-container {
background-color: #333;
overflow:
auto;
white-space: nowrap;
padding: 10px;
}
div.scroll-container img {
padding: 10px;
}
Попробуйте сами »
Совет: перейдите к нашему Учебнику по HTML-изображениям, чтобы узнать больше об изображениях.
Совет: перейдите к нашему Учебнику по CSS-стилю изображений, чтобы узнать больше о том, как стилизовать изображения.