I stumbled upon a solution on the internet that fixed my syntax errors - check it out: http://codepen.io/birjolaxew/pen/yJYLyz
Although I got past one hurdle, I'm now facing another challenge. How can I integrate setInterval so that the radio is checked every second and the next image appears? I tried watching some tutorials, but they didn't provide much help. Maybe if someone could take a look at my code and offer specific advice, I'd better grasp the concept!
Code:
<!-- Images -->
<div class="fb featuredslider_container">
<div id="images">
<img src="https://s-media-cache-ak0.pinimg.com/736x/a4/11/3e/a4113ec2da852f2eaa65af72e96decb6.jpg" />
<img src="http://cdn.arstechnica.net/wp-content/uploads/2015/09/GooglePlus-logos-02-980x980.png" />
<img src="http://img05.deviantart.net/6b35/i/2013/015/7/9/the_white_dog_sophie_2_by_thecakemassacre-d5rko7g.jpg" />
</div>
<!-- Radio Sutff -->
<div class="featuredradiowrap">
<input checked class="featuredradio" id="featureditemslider1" name="itemslider" type="radio">
<label for="featureditemslider1"></label>
<input class="featuredradio" id="featureditemslider2" name="itemslider" type="radio">
<label for="featureditemslider2"></label>
<input class="featuredradio" id="featureditemslider3" name="itemslider" type="radio">
<label for="featureditemslider3"></label>
</div>
</div>
Css:
.featuredslider_container{
position: relative;
width: 500px;
height: 250px;
margin: 0 auto 32px;
overflow: initial; /* Change to overflow:hidden if you want to see the final product */
box-shadow: 0 0 0 2px #BFB198;
}
#images {
font-size: 0;
/*Remove white space */
width: 1500px;
height: 100%;
animation: move-images 8s infinite;
position: absolute;
left: 0;
top: 0;
}
#images img {
width: 500px;
height: 100%;
}
/* Radio Sutff */
input[type="radio"] {
display: none;
}
.featuredradiowrap {
position: absolute;
bottom: 0.8rem;
left: 50%;
transform: translateX(-50%);
}
.featuredradio + label:before {
content: "";
display: inline-block;
margin-right: 2px;
border-radius: 30px;
background: #00a0ff;
height: 17px;
width: 17px;
}
input[type="radio"]:checked + label:before {
background: orange;
}
Javascript
var featuredRadio = document.getElementsByClassName("featuredradiowrap")[0];
var images = document.getElementById("images");
function leftAnimation() {
if (document.getElementById("featureditemslider1").checked == true) {
images.style.transition = "left 2s linear 0s";
images.style.left = "0";
} if (document.getElementById("featureditemslider2").checked == true) {
images.style.transition = "left 2s linear 0s";
images.style.left = "-500px";
}
if (document.getElementById("featureditemslider3").checked == true) {
images.style.transition = "left 2s linear 0s";
images.style.left = "-1000px";
}
}
featuredRadio.addEventListener("click", leftAnimation);