Jump to content

Recommended Posts

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>  



.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);}	
Link to post
Share on other sites

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.

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...