with of internet, came this: http://codepen.io/birjolaxew/pen/yjylyz
the author of posts fixed syntax errors :);
but came across problem, how can implement setinterval here? each second or radio checked , next image proceeds. i've googled few videos didn't aid me much. perhaps seeing code specific problem me in understanding!
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 overflow:hidden if want see 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);
try one. targeting wrapper, not inputs.
var featuredradio = document.getelementsbyclassname("featuredradio"); var images = document.getelementbyid("images"); function leftanimation() { if (featuredradio[0].checked == true) { images.style.transition = "left 2s linear 0s"; images.style.left = "0"; } else if (featuredradio[1].checked == true) { images.style.transition = "left 2s linear 0s"; images.style.left = "-500px"; } else if (featuredradio[2].checked == true) { images.style.transition = "left 2s linear 0s"; images.style.left = "-1000px"; } } featuredradio.addeventlistener("click", leftanimation); 