Putting a timer on slides

[sampharo 0]

Hi everyone, Thank you for letting me be here. This is my first posting. I am looking for some help with this slider I have on a website. It is working ok so far, except I can't seem to figure out a way to put a timer on the slides so that they would switch every few seconds.

How do you guys think I should do this?

Here is the code HTML:

<div class="slider"><ul class="slides">    <input type="radio" name="radio-btn" id="img-1" checked />    <li class="slide-container">		<div class="slide">          <a href="/HR-Diploma-exda.php"><img src="/images/Slider-HRM.jpg" alt="Certified Human Resources Professional Executive Diploma"/></a></div>		<div class="nav">			<label for="img-2" class="prev">‹</label>			<label for="img-2" class="next">›</label>		</div>    </li>    <input type="radio" name="radio-btn" id="img-2" />    <li class="slide-container">        <div class="slide">		  <img src="/images/Slider-ILC.jpg"  />                   </div>		<div class="nav">			<label for="img-1" class="prev">‹</label>			<label for="img-1" class="next">›</label>		</div>    </li></ul></div>  

CSS:

 

.slider{  margin-top:15px;  margin-bottom:15px;  margin-left:auto;  margin-right:auto;  padding-left:21px;  width:880px;  height:338px;  overflow:hidden;  border:0px solid;  position:relative;}.slides {    padding: 0;    width: 880px;    height: 338px;    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: 880px;    height: 338px;    display: block;    position: absolute;    transform: scale(0);    transition: all 0.2s ease-in-out;}.slide img {    width: 100%;    height: 100%;}.nav label {    width: 100px;    height: 30%;    display: none;    position: absolute;    top: 118px;	  opacity: 0.2;    z-index: 9;    cursor: pointer;    transition: opacity .2s;    color: #FFF;    font-size: 100pt;    text-align: center;    line-height: 85px;    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: 100%;	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: 100%;	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);}	

[davej 251]

You want a pure CSS slideshow? Normally Javascript is used for slideshows, but small numbers of images can be cycled with pure CSS3.

 

https://www.google.com/?gws_rd=ssl#q=css+slideshow

[sampharo 0]

I preferred pure CSS yes.

 

Thanks but all the examples are already packaged slideshows with their own effects. I don't want to rewrite or recustomize an entire new slider as the one I have was fitted perfectly for the website.

 

I was hoping that someone would pinpoint the command or line that I need to plug into what I already have in order to make it switch every few seconds. I can add Javascript if I have to, but I am not good enough to just look at whole other slideshows and pinpoint it myself.

[davej 251]

Try the tutorial...

 

http://www.w3schools.com/css/css3_animations.asp

[sampharo 0]

Thanks but that doesn't help. Like I said I am not into recustomizing the whole slider, I am not a programmer. Would appreciate a more direct solution with specific instructions perhaps.