Использование HTML и CSS для создания слайдера изображений
web-design web-development html coding-skills learn-to-code css image image-slider

Использование HTML и CSS для создания слайдера изображений

11 мая 2022 г.

В этой статье мы узнаем, как создать слайдер изображений с помощью HTML и CSS. Вы можете просмотреть полный исходный код по ссылке ниже.


https://codepen.io/taimoorsattar/pen/yLJBdKO


Для начала мы можем структурировать наш HTML-код, как показано ниже:


```javascript



Слайдер изображений



<изображение


src="https://i.picsum.photos/id/694/500/500.jpg?hmac=cEe2DO9tVxp0o0HjSI5RboKc75ofkq50NvKBIlB_0fQ"


альт = "картинка"


<изображение


src="https://i.picsum.photos/id/531/500/500.jpg?hmac=eaduedF4dw0jS6AeDrrxNJIxAlsmWfdZWEPdEG84WRw"


альт = "картинка"






Вы можете добавить столько изображений, сколько захотите. Чтобы загрузить фиктивные изображения, посетите picsum.photos сайт.


В приведенном выше HTML мы определили имена классов элементов HTML, которые структурированы, как показано ниже.


```javascript


.обертка


└── .slider


└──


└──


└── .......


Мы можем вставить столько изображений, сколько захотим. Мы можем видеть только те изображения, которые видим нам. Как показано на изображении ниже, желтая область — это видимая область, в которой отображаются изображения. Ползунок изображения оставлен для отображения большего количества изображений.



Далее нам нужно определить ширину и высоту видимой области, как показано выше. Чтобы определить ширину видимой области, мы можем определить класс .wrapper, как показано ниже.


```javascript


.обертка {


маржа: авто;


максимальная ширина: 960 пикселей;


Чтобы показать больше изображений, видимая область должна прокручиваться. Для этого мы можем определить класс .slider, как показано ниже.


```javascript


.слайдер {


переполнение-x: прокрутка;


пробел: nowrap;


Затем, чтобы сделать полосу прокрутки слайдера более привлекательной, мы можем написать приведенный ниже код на CSS.


```javascript


::-вебкит-полоса прокрутки {


высота: 5 пикселей;


ширина: 10 пикселей;


радиус границы: 5px;


/ Отслеживать /


::-webkit-scrollbar-track {


фон: #f1f1f1;


радиус границы: 5px;


/ Ручка /


::-webkit-scrollbar-thumb {


фон: #888;


радиус границы: 5px;


/ Ручка при наведении /


::-webkit-scrollbar-thumb: hover {


фон: #555;


Кроме того, я написал блог о полосах прокрутки CSS, если вам интересно узнать, перейдите по ссылке ниже.



Наконец, наш предварительный просмотр слайдера изображения находится ниже.




Также опубликовано здесь


Оригинал

Recent Post

Categories

PREVIOUS ARTICLE
NEXT ARTICLE