Как создать слайд-шоу/карусель только с использованием CSS без JavaScript?
Создание слайд-шоу или карусели только с использованием CSS возможно с помощью псевдоклассов и свойств, таких как display, opacity, transform и transition. Один из самых простых способов — использовать радиокнопки для управления отображением изображений.
Пример CSS-слайд-шоу
В приведенном ниже примере мы создадим простую карусель для трех изображений. Каждый слайд будет отображаться по очереди при выборе радио-кнопки.
HTML
<div class="slideshow">
<input type="radio" name="slides" id="slide1" checked>
<input type="radio" name="slides" id="slide2">
<input type="radio" name="slides" id="slide3">
<div class="slides">
<div class="slide" id="s1">Слайд 1</div>
<div class="slide" id="s2">Слайд 2</div>
<div class="slide" id="s3">Слайд 3</div>
</div>
<div class="navigation">
<label for="slide1"></label>
<label for="slide2"></label>
<label for="slide3"></label>
</div>
</div>
CSS
.slideshow {
position: relative;
width: 300px;
height: 200px;
overflow: hidden;
}
input[type="radio"] {
display: none;
}
.slides {
display: flex;
transition: transform 0.5s ease;
width: 300%;
}
.slide {
width: 100%;
height: 100%;
font-size: 24px;
color: white;
display: flex;
align-items: center;
justify-content: center;
}
#slide1:checked ~ .slides {
transform: translateX(0);
background-color: red;
}
#slide2:checked ~ .slides {
transform: translateX(-100%);
background-color: green;
}
#slide3:checked ~ .slides {
transform: translateX(-200%);
background-color: blue;
}
.navigation {
position: absolute;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
}
label {
display: inline-block;
width: 10px;
height: 10px;
margin: 0 5px;
background-color: white;
border-radius: 50%;
cursor: pointer;
}
Пояснение
.slides имеет свойство display: flex, что позволяет нам размещать слайды в одну линию. Мы используем transform и translateX для перемещения между слайдами на основе того, какая радио-кнопка выбрана.transition позволяет плавно анимировать изменение положения.Заключение
Таким образом, вы можете создать простую карусель с помощью лишь HTML и CSS. Это решение не требует JavaScript, что делает его легким для имплементации в проектах, где минимизация зависимостей важна. Пробуйте адаптировать данный пример, добавляя новые стили и эффекты по вашему усмотрению!