Сделать картинки слайдеры html css

Хороший способ создания слайдера изображений в HTML/CSS — использовать элементы «radio» и CSS свойства «opacity» и «transform». Вот пример:

HTML:

<div class="slider">
  <!-- Radio buttons -->
  <input type="radio" name="slider" id="img1" checked>
  <input type="radio" name="slider" id="img2">
  <input type="radio" name="slider" id="img3">
  
  <!-- Slides -->
  <div class="slide slide1"></div>
  <div class="slide slide2"></div>
  <div class="slide slide3"></div>
  
  <!-- Navigation -->
  <label for="img1"></label> 
  <label for="img2"></label>
  <label for="img3"></label>
</div>

CSS:

.slider {
  position: relative;
  max-width: 800px;
  margin: 0 auto;
}

.slider input[type="radio"] {
  display: none;
}

.slider .slide {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

.slider .slide1 {
  background-image: url("img1.jpg");
  z-index: 4;
  opacity: 1;
}

.slider .slide2 {
  background-image: url("img2.jpg");
  z-index: 3;
}

.slider .slide3 {
  background-image: url("img3.jpg");
  z-index: 2;
}

.slider input[type="radio"]:checked + .slide {
  opacity: 0;
  z-index: 1;
}

.slider input[type="radio"]:checked + .slide:hover {
  cursor: pointer;
}

.slider label {
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  background-color: #fff;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  z-index: 5;
  cursor: pointer;
}

.slider label:hover {
  background-color: #ccc;
}

.slider #img1:checked ~ label[for="img1"],
.slider #img2:checked ~ label[for="img2"],
.slider #img3:checked ~ label[for="img3"] {
  background-color: #ccc;
}

В этом примере мы создаем слайдер с тремя изображениями. Сами изображения добавляются через CSS как фон блоков с классом .slide1, .slide2 и .slide3.

Используя свойство opacity, мы устанавливаем непрозрачность для слайдов и при клике на радио-кнопку (input[type=»radio»]) активный слайд получает максимальную непрозрачность (opacity = 1), а другие становятся скрытыми (opacity = 0).

Далее мы добавляем элементы label как кнопки навигации между изображениями. Элементы label позиционируются абсолютно и отображаются как круги. Чтобы связать label с radio-кнопками, мы присваиваем им атрибут «for» со значением ID соответствующего radio-кнопки.

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

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