Не могу понять в чём проблема, а именно почему не происходит переключение между <input type="radio">
:
.slider {
width: 700px;
height: 350px;
border: 1px solid #888;
position: relative;
text-align: center;
}
.slider>input {
display: none;
}
.slider>input+label {
display: inline-block;
width: 10px;
height: 10px;
border-radius: 8px;
background: rgba(90, 90, 90, 0.8);
border: 2px solid rgba(190, 190, 190, 0.8);
cursor: pointer;
z-index: 100;
position: relative;
margin-right: 4px;
top: 90%;
transition: background 0.8s ease-out 0s;
}
.slider>input+label:hover {
background: rgba(250, 250, 250, 0.8);
}
.slider>input:checked+label {
background: black;
}
<div class="slider">
<input type="radio" name="sliderbutton" id="slider_chek1_1" checked>
<label for="slider_check1_1"></label>
<input type="radio" name="sliderbutton" id="slider_chek1_2">
<label for="slider_check1_2"></label>
<input type="radio" name="sliderbutton" id="slider_chek1_3">
<label for="slider_check1_3"></label>
<input type="radio" name="sliderbutton" id="slider_chek1_4">
<label for="slider_check1_4"></label>
<input type="radio" name="sliderbutton" id="slider_chek1_5">
<label for="slider_check1_5"></label>
</div>