Хороший способ создания слайдера изображений в 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-кнопки.
Также мы добавляем стили для изменения цвета кнопок, когда их нажимают, а также добавляем небольшую анимацию при наведении курсора на кнопки.
При использовании этого примера вы можете изменить изображения, заменив их ссылками на свои изображения, а также изменить оформление кнопок навигации и блоков с изображениями, в зависимости от ваших потребностей.
