jquery - How to Make CSS Image Slider Move Through Slides Automatically -

jquery - How to Make CSS Image Slider Move Through Slides Automatically -

i have css , html image slider, want move through pictures after 3-5 seconds. quite happy utilize jquery don't know how this... please help? don't understand how utilize jquery. help appreciated... thankyou.

class="snippet-code-css lang-css prettyprint-override">@import url(http://fonts.googleapis.com/css?family=varela+round); .slides { padding: 0; width: 600px; height: 300px; display: block; margin: 0 auto; position: relative; } .slides * { user-select: none; -ms-user-select: none; -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; } .slides input { display: none; } .slide-container { display: block; } .slide { top: 0; opacity: 0; width: 600px; height: 300px; display: block; position: absolute; transform: scale(0); transition: .7s ease-in-out; } .slide img { width: 600px; height: 300px; } .nav label { width: 150px; height: 300px; display: none; position: absolute; opacity: 0; z-index: 9; cursor: pointer; transition: opacity .2s; color: #fff; font-size: 156pt; text-align:center; line-height: 270px; font-family: "varela round", sans-serif; background-color: rgba(255, 255, 255, .3); text-shadow: 0px 0px 15px rgb(119, 119, 119); } .slide:hover + .nav label { opacity: 0.5; } .nav label:hover { opacity: 1; } .nav .next { right: 0; } input:checked + .slide-container .slide { opacity: 1; transform: scale(1); transition: opacity 1s ease-in-out; } input:checked + .slide-container .nav label { display: block; } .nav-dots { width: 600px; bottom: 9px; height: 11px; display: block; position: absolute; text-align: center; } .nav-dots .nav-dot { top: -5px; width: 11px; height: 11px; margin: 0 4px; position: relative; border-radius: 10px; display: inline-block; background-color: rgba(0, 0, 0, 0.6); } .nav-dots .nav-dot:hover { cursor: pointer; background-color: rgba(0, 0, 0, 0.8); } input#img-1:checked ~ .nav-dots label#img-dot-1, input#img-2:checked ~ .nav-dots label#img-dot-2, input#img-3:checked ~ .nav-dots label#img-dot-3, input#img-4:checked ~ .nav-dots label#img-dot-4, input#img-5:checked ~ .nav-dots label#img-dot-5, input#img-6:checked ~ .nav-dots label#img-dot-6 { background: rgba(0, 0, 0, 0.8); } #everything { position:absolute; left:380px; top:330px; } .slide label { position:absolute; left: 50px; top: 20px; background-color:#ffffff; border-radius: 3px; border-color:white; width: 150px; text-align:center; font-family:impact; font-size:20px; } class="snippet-code-html lang-html prettyprint-override"><div id = "everything"> <ul class="slides"> <input type="radio" name="radio-btn" id="img-1" checked /> <li class="slide-container"> <div class="slide"> <label>tmnt</label> <img src="slider/tmnt.jpg" /> </div> <div class="nav"> <label for="img-6" class="prev">&#x2039;</label> <label for="img-2" class="next">&#x203a;</label> </div> </li> <input type="radio" name="radio-btn" id="img-2" /> <li class="slide-container"> <div class="slide"> <label>box trolls</label> <img src="slider/boxtrolls.jpg" /> </div> <div class="nav"> <label for="img-1" class="prev">&#x2039;</label> <label for="img-3" class="next">&#x203a;</label> </div> </li> <input type="radio" name="radio-btn" id="img-3" /> <li class="slide-container"> <div class="slide"> <label>if stay</label> <img src="slider/ifistay.png" /> </div> <div class="nav"> <label for="img-2" class="prev">&#x2039;</label> <label for="img-4" class="next">&#x203a;</label> </div> </li> <input type="radio" name="radio-btn" id="img-4" /> <li class="slide-container"> <div class="slide"> <label>ouija</label> <img src="slider/ouija.jpg" /> </div> <div class="nav"> <label for="img-3" class="prev">&#x2039;</label> <label for="img-5" class="next">&#x203a;</label> </div> </li> <input type="radio" name="radio-btn" id="img-5" /> <li class="slide-container"> <div class="slide"> <label>the maze runner</label> <img src="slider/themazerunner.png" /> </div> <div class="nav"> <label for="img-4" class="prev">&#x2039;</label> <label for="img-6" class="next">&#x203a;</label> </div> </li> <input type="radio" name="radio-btn" id="img-6" /> <li class="slide-container"> <div class="slide"> <label>unknown</label> <img src="http://farm9.staticflickr.com/8195/8098750703_797e102da2_z.jpg" /> </div> <div class="nav"> <label for="img-5" class="prev">&#x2039;</label> <label for="img-1" class="next">&#x203a;</label> </div> </li> <li class="nav-dots"> <label for="img-1" class="nav-dot" id="img-dot-1"></label> <label for="img-2" class="nav-dot" id="img-dot-2"></label> <label for="img-3" class="nav-dot" id="img-dot-3"></label> <label for="img-4" class="nav-dot" id="img-dot-4"></label> <label for="img-5" class="nav-dot" id="img-dot-5"></label> <label for="img-6" class="nav-dot" id="img-dot-6"></label> </li> </ul> </div>

here javascript changes radio button input selected. cycle every 3 seconds alter 3000 if want alter wait time. added in if user clicks on navigation dot cycle stop.

$(document).ready(function() { var scrollposition = 2; var clicked = false; setinterval(function(){ if(!clicked) { $('#img-' + scrollposition).prop('checked', true); if(scrollposition < 4) { scrollposition += 1; } else { scrollposition = 1; } } }, 3000); $('.nav-dot').click(function() { clicked = true; }); });

jquery css