Very Small jQuery Slider
Very Small jQuery Slider
vendor prefixes not added coz border-radiius as well as box-shadow works in all modern browsers without prefixes.Used some images found via google's image search term 800x300
by Eugene MechanisM
December 12, 2011
HTML
<ul class="slides"><li class="active">
<img alt="" src="http://i.imgur.com/HHzVr.jpg"><p>Image #1 Title<span> </span></p>
</li><li>
<img alt="" src="http://i.imgur.com/LeUbs.jpg"><p>2nd Image Title<span> </span></p>
</li><li>
<img alt="" src="http://i.imgur.com/MoIWR.jpg"><p>Image #3 Title<span> </span></p>
</li></ul>
CSS
*{padding:0;margin:0;list-style:none;text-decoration:none;color:#000}
.slides p{position:absolute;z-index:12;bottom:0;right:0;background:#ccc;padding:0 10px;border-radius:6px 0}
.slides li{left:0px;top:0px;position:absolute;z-index:8;opacity:.0;align:center}
.slides img{display:block;border:0;border-radius:6px}
.slides .active{z-index:10;opacity:1}
.slides .last-active{z-index:9}
@-webkit-keyframes typing{from{width:100%}to{width:0}}
@-moz-keyframes typing{from{width:100%}to{width:0}}
.active p span{position:absolute;top:0;right:0;width:0;
background:#ccc;-moz-box-sizing:border-box;box-sizing:border-box;
-webkit-animation: typing 3s steps(30,end);-moz-animation:typing 3s steps(30,end)}
JavaScript
$(function(){setInterval(function(){var sl = $('.slides li');var cur = $('.slides .active');if(cur.length === 0){cur = sl.last();}
var nxt = cur.next().length ? cur.next() : sl.first();
cur.addClass('last-active');
nxt.css({opacity:0}).addClass('active').animate({opacity:1},1000,function() {cur.removeClass('active last-active');});},5000);});