Having issues with my circle divs not changing to a black background when the linked radios are checked. This is for a carousel that cycles automatically in JavaScript. Manually changing the color works fine, but the CSS doesn't seem to apply. Help, please!
Here is the CSS:
#radio1:checked ~ .navigation-auto .auto-btn1{
background: black;
}
#radio2:checked ~ .navigation-auto .auto-btn2{
background: black;
}
#radio3:checked ~ .navigation-auto .auto-btn3{
background: black;
}
#radio4:checked ~ .navigation-auto .auto-btn4{
background: black;
}
#radio5:checked ~ .navigation-auto .auto-btn5{
background: black;
}
The HTML section that matters:
<div class="slides">
<input type="radio" name="radio-btn" id="radio1">
<input type="radio" name="radio-btn" id="radio2">
<input type="radio" name="radio-btn" id="radio3">
<input type="radio" name="radio-btn" id="radio4">
<input type="radio" name="radio-btn" id="radio5">
.....rest of code
And for the navigation:
<div class="navigation-auto">
<div class="auto-btn1"></div>
<div class="auto-btn2"></div>
<div class="auto-btn3"></div>
<div class="auto-btn4"></div>
<div class="auto-btn5"></div>
</div>
Not sure if this is enough information, let me know if you need more. Manually changing the div color works, but the radio:checked functionality doesn't seem to be working for me.
Here is the JavaScript:
var counter = 1;
setInterval(function(){
document.getElementById('radio' + counter).checked = true;
counter++;
if(counter >5){
counter =1;
}
}, 5000);