Author: | colleenmcguckin |
---|---|
Views Total: | 5,435 views |
Official Page: | Go to website |
Last Update: | September 5, 2015 |
License: | MIT |
Preview:

Description:
A pure CSS slider component that each new image slides over the previous one with CSS3 animations.
How to use it:
Add a list of images to the slider.
<ul class="slides"> <li class="first" id="slide-1"><img src="1.jpg"></li> <li id="slide-2"><img src="2.jpg"></li> <li id="slide-3"><img src="3.jpg"></li> <li id="slide-4"><img src="4.jpg"></li> <li id="slide-5"><img src="5.jpg"></li> <li id="slide-6"><img src="6.jpg"></li> <li id="slide-7"><img src="7.jpg"></li> </ul>
Create a thumbnails navigation for the slider.
<ul class="thumbs"> <li><a href="#slide-1"><img src="thumb1.jpg"><span>This is image 1</span></a></li> <li><a href="#slide-2"><img src="thumb2.jpg"><span>This is image 2</span></a></li> <li><a href="#slide-3"><img src="thumb3.jpg"><span>This is image 3</span></a></li> <li><a href="#slide-4"><img src="thumb4.jpg"><span>This is image 4</span></a></li> <li><a href="#slide-5"><img src="thumb5.jpg"><span>This is image 5</span></a></li> <li><a href="#slide-6"><img src="thumb6.jpg"><span>This is image 6</span></a></li> <li><a href="#slide-7"><img src="thumb7.jpg"><span>This is image 7</span></a></li> </ul>
The main CSS styles for the slider.
ul.slides { overflow: hidden; clear: both; border: #333 solid 4px; } ul.slides, ul.slides li, ul.slides a, ul.slides img { width: 705px; height: 350px; position: relative; } ul.slides li { position: absolute; z-index: 50; } ul.slides li:not(:target) { -webkit-animation-name: noTarget; -webkit-animation-duration: 1s; -webkit-animation-iteration-count: 1; }
The CSS styles for the thumbnails navigation.
ul.thumbs li { float: left; margin-bottom: 10px; margin-right: 9px; } ul.thumbs a { display: block; position: relative; width: 85px; height: 55px; border: 4px solid transparent; font: bold 12px/25px Arial, sans-serif; color: #515151; text-decoration: none; text-shadow: 1px 1px 0px rgba(255, 255, 255, .25), inset 1px 1px 0px rgba(0,0,0, .15); } ul.thumbs img { border: #333 solid 4px; } ul.thumbs li a:hover span { position: absolute; z-index: 101; bottom: -30px; left: -22px; display: block; width: 100px; height: 25px; text-align: center; border-radius: 3px; -webkit-box-shadow: 0px 1px 0px rgba(0,0,0, .4); -moz-box-shadow: 0px 1px 0px rgba(0,0,0, .4); box-shadow: 0px 1px 0px rgba(0,0,0, .4); background: #fff; /* older browsers */ background: -webkit-linear-gradient(top, #fff, 0%, #bcbcbc, 100%); background: -moz-linear-gradient(top, #fff, 0%, #bcbcbc, 100%); background: -o-linear-gradient(top, #fff, 0%, #bcbcbc, 100%); background: -ms-linear-gradient(top, #fff, 0%, #bcbcbc, 100%); background: linear-gradient(top, #fff, 0%, #bcbcbc, 100%); } ul.thumbs li a:hover span:before { width: 0px; height: 0px; border-bottom: 5px solid #fff; border-left: 5px solid transparent; border-right: 5px solid transparent; content: ''; position: absolute; top: -5px; left: 44px; } ul.thumbs li:first-child a:hover span { left: -3px; } ul.thumbs li:first-child a:hover span:before { left: 25px; }
The CSS3 animation for the slider.
@-webkit-keyframes 'slide' { 0% { left: -500px; } 100% { left: 0px; } } ul.slides li:target { z-index: 100; -webkit-animation-name: slide; -webkit-animation-duration: 1s; -webkit-animation-iteration-count: 1; } /* not target */ @-webkit-keyframes 'noTarget' { 0% { z-index: 75; } 100% { z-index: 75; } }