Создание слайдера изображений с помощью HTML и CSS

В этом разделе мы узнаем, как создать слайдер изображений с помощью 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

Наконец, наш слайдер изображений отображается следующим образом.

Создание слайдера изображений с помощью HTML и CSS

Рекомендуем почитать: