.slider {
width: 400px;

overflow: hidden; /* Скрываем неактивные слайды */

position: relative;

}

.slides {

display: flex;

width: 300%; /* Ширина = количество слайдов × 100% */

transition: transform 0.5s ease-in-out;

}

.slide {

width: 100%;

flex-shrink: 0; /* Предотвращаем сжатие слайдов */

}

/* Скрываем радиокнопки */

input[type=»radio»] {

display: none;

}

/* Переключение слайдов */

#slide1:checked ~ .slides { transform: translateX(0%); }

#slide2:checked ~ .slides { transform: translateX(-33.33%); }

#slide3:checked ~ .slides { transform: translateX(-66.66%); }

/* Стилизация элементов управления */

.controls {

text-align: center;

margin-top: 10px;

}

.controls label {

display: inline-block;

width: 12px;

height: 12px;

background: #ccc;

border-radius: 50%;

margin: 0 5px;

cursor: pointer;

transition: background 0.3s;

}

/* Активная точка */

#slide1:checked ~ .controls label:nth-child(1),

#slide2:checked ~ .controls label:nth-child(2),

#slide3:checked ~ .controls label:nth-child(3) {

background: #333;

}