sampharo Posted April 10, 2015 Share Posted April 10, 2015 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);} Link to comment Share on other sites More sharing options...
davej Posted April 10, 2015 Share Posted April 10, 2015 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 Link to comment Share on other sites More sharing options...
sampharo Posted April 10, 2015 Author Share Posted April 10, 2015 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 comment Share on other sites More sharing options...
davej Posted April 10, 2015 Share Posted April 10, 2015 Try the tutorial... http://www.w3schools.com/css/css3_animations.asp Link to comment Share on other sites More sharing options...
sampharo Posted April 11, 2015 Author Share Posted April 11, 2015 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. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now