Как сделать слайдер на сайте html css

Один из самых простых способов для создания слайдера на html и css - это использование стандартного CSS свойства scroll-snap-type в сочетании с scroll-snap-align.

Для этого нужно создать контейнер, в котором будут располагаться слайды, и задать ему свойство scroll-snap-type: x mandatory;, чтобы горизонтальный скролл происходил с определенным шагом. Затем для каждого слайда нужно задать свойство scroll-snap-align: start;, чтобы они выравнивались по левому краю контейнера.

Пример:

.container {
  display: flex;
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
  width: 300px;
  -webkit-overflow-scrolling: touch; /* для плавной прокрутки на мобильных устройствах */
}

Правило scroll-snap-type: x mandatory указывает, что прокрутка должна происходить только по горизонтали, а элементы должны привязываться к точкам привязки, заданным в этом направлении. Правило overflow-x: scroll задаёт горизонтальную прокрутку.

Далее, необходимо задать точки привязки для элементов слайдера, для этого используется свойство scroll-snap-align:

.slide {
  flex: none;
  scroll-snap-align: start;
  width: 300px;
  text-align: center;
}

Правило scroll-snap-align: start указывает, что элемент должен привязываться к началу контейнера при прокрутке.

Пример HTML-кода:

<div class="container">
  <div class="slide">Первый слайд</div>
  <div class="slide">Второй слайд</div>
  <div class="slide">Третий слайд</div>
</div>

Таким образом, при прокрутке контейнера элементы будут переключаться по одному, в соответствии с заданными точками привязки.