In this tutorial I am going to share CSS3 only script to create simple auto play image slider, script written by Alex Devero, a simple auto play button can enable automatically image slide show. You don’t need any third party jquery slider plugin this script written in pure CSS3 and HTML. Just copy the following script and all done and link your images.
HTML
Create unordered list and with list of images you want to slide automatically on click of auto play button.
|
Add auto play button which help you to auto play slide show.
CSS
Styling slider with auto play slideshow animation.
ul, li { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block } body { line-height: 1 } ol, ul { list-style: none } blockquote, q { quotes: none } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none } table { border-collapse: collapse; border-spacing: 0 } /** * Base */ body { font-size: 100%; background: #f1f1f1; } /* Fallback for hidden attribute */ hidden { display: none; } /** * Keyframes for autoplay */ @-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; } } /** * Slider */ .slider { position: relative; /* top margin is for purposes of demo */ 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; } /** * 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; } |
See live demo and download source code.