Сохранение всех кнопок в нижней части слайдера изображения ⇐ CSS

[Anonymous]

Я использую слайдер изображений на своем веб-сайте. Это работает хорошо, за исключением того, что кнопки (круглые точки) в нижней части ползунка перемещаются вниз по экрану, когда я изменяю размер веб-страницы.

Код: Выделить всё

var counter = 1
setInterval(function() {
document.getElementById("radio" + counter).checked = true
counter++
if (counter > 4) {
counter = 1
}
}, 5000)

Код: Выделить всё

.slider {
width: 85%;
height: 100%;
border-radius: 10px;
text-align: center;
overflow: hidden;
position: relative;
left: 50%;
transform: translateX(-50%);
}

.slides {
width: 500%;
display: flex;
}

.slides input {
display: none;
}

.slide {
width: 20%;
transition: 2s;
}

.slide img {
width: 100%;
height: 100%;
}

.slide-manual {
position: absolute;
width: 100%;
margin-top: -60px;
display: flex;
align-items: center;
justify-content: center;
}

.manual-button {
border: 2px solid #ffffff;
padding: 5px;
border-radius: 10px;
cursor: pointer;
transition: 1s;
margin: 15px;
}

.manual-button:hover {
background: #ffffff;
}

#radio-button1:checked~.one {
margin-left: 0;
}

#radio-button2:checked~.one {
margin-left: -20%;
}

#radio-button3:checked~.one {
margin-left: -40%;
}

#radio-button4:checked~.one {
margin-left: -60%;
}

#radio-button5:checked~.one {
margin-left: -80%;
}

.slide-automatic {
position: absolute;
display: flex;
width: 100%;
justify-content: center;
align-items: center;
margin-top: 440px;
}

.slide-automatic div {
border: 2px solid #ffffff;
padding: 5px;
border-radius: 10px;
transition: 1s;
margin: 15px;
}

#radio-button1:checked~.slide-automatic .auto-button1,
#radio-button2:checked~.slide-automatic .auto-button2,
#radio-button3:checked~.slide-automatic .auto-button3,
#radio-button4:checked~.slide-automatic .auto-button4,
#radio-button5:checked~.slide-automatic .auto-button5 {
background: #ffffff;
}

Код: Выделить всё

[img]#[/img]

[img]#[/img]

[img]#[/img]

У меня есть два набора кнопок, которые отображаются на слайдере изображений (.slide -ручной и .слайд-автоматический). Я пробовал добавлять и изменять высоту и ширину, а также менять позицию: абсолютную; на позицию: относительную. Ни одно из этих изменений не решило проблему.
Я бы хотел, чтобы эти кнопки накладывались и закреплялись в нижней части ползунка изображения независимо от размера экрана.
Буду очень признателен за любые советы о том, как этого добиться.

Подробнее здесь: https://stackoverflow.com/questions/792 ... age-slider