В этом разделе мы узнаем, как создать слайдер изображений с помощью HTML и CSS. Полный исходный код можно посмотреть по ссылке ниже.
👆👆👆
Для начала мы можем структурировать Html-код, как показано ниже:
<div class="wrapper">
<h2>Image Slider</h2>
<div class="slider">
<img
src="https://i.picsum.photos/id/694/500/500.jpg?hmac=cEe2DO9tVxp0o0HjSI5RboKc75ofkq50NvKBIlB_0fQ"
alt="pic"
/>
<img
src="https://i.picsum.photos/id/531/500/500.jpg?hmac=eaduedF4dw0jS6AeDrrxNJIxAlsmWfdZWEPdEG84WRw"
alt="pic"
/>
. .
<!-- More Images Here. -->
. .
</div>
</div>
<!-- wrapper -->
Вы можете добавить столько изображений, сколько захотите. Для загрузки фиктивных изображений вы можете посетить сайт picsum.photos.
В приведенном выше HTML мы определили имена классов для элементов HTML, структура которых показана ниже.
.wrapper
└── .slider
└── <img>
└── <img>
└── ....<img>...
Мы можем вставить столько изображений, сколько захотим. Мы можем видеть только те изображения, которые видны нам. Как показано на рисунке ниже, желтая область — это видимая область, в которой отображаются изображения. Ползунок изображения передвигается влево, чтобы открыть больше изображений.
Далее нам нужно определить ширину и высоту видимой области, как показано выше. Чтобы определить ширину видимой области, мы можем определить класс .wrapper
, как показано ниже.
.wrapper {
margin: auto;
max-width: 960px;
}
Для того чтобы можно было показать больше изображений, видимая область должна прокручиваться. Для этого мы можем определить класс .slider
, как показано ниже.
.slider {
overflow-x: scroll;
white-space: nowrap;
}
Далее, чтобы сделать полосу прокрутки слайдера более причудливой, мы можем написать следующий код в CSS.
::-webkit-scrollbar {
height: 5px;
width: 10px;
border-radius: 5px;
}
/* Track */
::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 5px;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: #888;
border-radius: 5px;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #555;
}
Кроме того, я написал блог о CSS scrollbar, если вам интересно узнать, перейдите по ссылке ниже.
- CSS scrollbar
Наконец, наш слайдер изображений отображается следующим образом.