Author: | alexdevero |
---|---|
Views Total: | 71,162 views |
Official Page: | Go to website |
Last Update: | November 16, 2015 |
License: | MIT |
Preview:

Description:
A simple, CSS only, automatic image slider that makes use of CSS3 properties to move images from right to left.
How to use it:
Add a group of images into the slider.
<div class="slider"> <ul class="slider__list"> <li class="slider__slide"><img src="1.jpg" alt="Image 1" /></li> <li class="slider__slide"><img src="2.jpg" alt="Image 2" /></li> <li class="slider__slide"><img src="3.jpg" alt="Image 3" /></li> <li class="slider__slide"><img src="4.jpg" alt="Image 4" /></li> </ul> </div>
Add a slider control to the webpage.
<input id="sliderSwitch" class="slider__switch" type="checkbox" name="sliderSwitch" hidden /> <div class="slider__control"> <label for="sliderSwitch"></label> </div>
Style the image slider.
.slider { position: relative; margin-top: 3rem; margin-right: auto; margin-left: auto; overflow: hidden; width: 40.625rem; height: 26.25rem; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25); } .slider__list { position: absolute; left: 0; width: 162.5rem; } .slider__slide { float: left; }
The CSS rules for the slider control.
.slider__control { margin-right: auto; margin-left: auto; width: 4.5rem; font-family: sans-serif; } .slider__control label { position: relative; display: block; margin-top: 2rem; margin-bottom: 1rem; width: 4.5rem; height: 2rem; font-size: 1rem; font-weight: normal; line-height: 1.5; color: transparent; background: #ddd; border-radius: 2rem; cursor: pointer; -webkit-transition: left 0.15s ease-out; transition: left 0.15s ease-out; } .slider__control label:before { content: "autoplay"; position: absolute; top: 2.5rem; left: 0; color: #333; font-size: .95rem; font-weight: bold; text-transform: uppercase; } .slider__control label:after { content: ""; position: absolute; top: .25rem; left: .25rem; display: block; width: 1.5rem; height: 1.5rem; border-radius: 2rem; background: #fff; -webkit-transition: left 0.15s ease-out; transition: left 0.15s ease-out; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .slider__switch:checked + .slider > .slider__list { -webkit-animation-name: autoplay; animation-name: autoplay; /* This will change the time it takes to move to next slide */ -webkit-animation-duration: 10s; animation-duration: 10s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; } .slider__switch:checked + .slider + .slider__control > label { background: #455a64; } .slider__switch:checked + .slider + .slider__control > label:after { left: 2.75rem; }
Enable autoplay using CSS3 keyframes.
@-webkit-keyframes autoplay { /* position of the first slide */ 0% { left: 0; } /* position of the second slide */ 25% { left: -40.625rem; } /* position of the third slide */ 50% { left: -81.25rem; } /* position of the fourth slide */ 100% { left: -121.875rem; } } @keyframes autoplay { /* position of the first slide */ 0% { left: 0; } /* position of the second slide */ 25% { left: -40.625rem; } /* position of the third slide */ 50% { left: -81.25rem; } /* position of the fourth slide */ 100% { left: -121.875rem; } }
I hate sliders that autoplay with no way to turn them off. So this is very nice from that regard.
What would it take to “flip” the slides manually?
wow this is amazing . welldone.I love it.wow
Typed it out in Webstorm, checked for mistakes…Does not work. Copied into Brackets and realigned my links..doesn’t work…in chrome or Firefox..why ?
There is some process dude,, copy paste doesn’t works everytime.