Ken Burns Slideshow

HTML

<div class="ss-slides">
	    <div class="ss-slide">
        <img src="http://lorempixel.com/400/200/food" />
    </div>
   <div class="ss-slides">
	    <div class="ss-slide">>
        <img src="http://lorempixel.com/400/200/people" />
    </div>
    <div class="kb-slide"  title="Go sports.">
        <img src="http://lorempixel.com/400/200/sports" />
    </div>
    <div class="kb-slide"  title="Look, a city.">
        <img src="http://lorempixel.com/400/200/city" />
    </div>
    <div class="kb-slide"  title="Ah, Nature.">
        <img src="http://lorempixel.com/400/200/nature" />
    </div>
  
    
</div>

CSS

body {
    padding:30px;
    text-align:center;
    background:#555;
}
.kb-slides-wrap {
    position:relative;
    display:inline-block;
    line-height:0px;
    overflow:hidden;
    border:5px solid #fff;
    border-radius:6px;
    box-shadow:0px 4px 6px #000;
}
.kb-caption {
    background:rgb(0,0,0);
    background:rgba(0,0,0,.7);
    color:#fff;
    width:100%;
    padding:15px 0;
    font-family:sans-serif;
    font-size:16px;
    text-align:center;
    position:absolute;
    bottom:0px;
    -webkit-transition:all .2s ease-out;
    -moz-transition:all .2s ease-out;
    transition:all .2s ease-out;
}
.kb-slides {
    position:relative;
    overflow:hidden;
    display:inline-block;
    transform-origin:50% 50%;
    -ms-transform-origin:50% 50%;
    -webkit-transform-origin:50% 50%;
}
.kb-slide {
    top:0;
    left:0;
    position: absolute;
    zoom: 1;
    line-height:0;
    -webkit-backface-visibility: hidden;
}
.kb-slide:after {
    content: "";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}
.kb-slide img {
    max-width:100%;    
}
.notrans {
    -webkit-transition: none!important;
    -moz-transition:none!important;
    transition: none!important;
}

JavaScript

(function($){$.fn.extend({smoothSlides:function(options){function captionUpdater(){if($(".ss-slide:eq(-2)").attr("title")){var e=$(".ss-slide:eq(-2)").attr("title");$(".ss-caption").html(e).fadeIn(500)}else{$(".ss-caption").fadeOut(500,function(){$(".ss-caption").empty()})}}function paginateForwards(){var e=$(".ss-current").index()+1,t=e+1,n=$(".ss-paginate a").length;if(e>=n){$(".ss-current").removeClass("ss-current");$(".ss-paginate a:first").addClass("ss-current")}else{$(".ss-current").removeClass("ss-current");$(".ss-paginate a").eq(e).addClass("ss-current")}}function paginateBackwards(){var e=$(".ss-current").index()+1,t=e-2,n=$(".ss-paginate a").length;if(e<=1){$(".ss-current").removeClass("ss-current");$(".ss-paginate a:last").addClass("ss-current")}else{$(".ss-current").removeClass("ss-current");$(".ss-paginate a").eq(t).addClass("ss-current")}}function crossFade(){captionUpdater();paginateForwards();$(".ss-slide:last").addClass("notrans").fadeOut("slow",function(){$(this).prependTo(".ss-slides").removeClass("notrans").css({webkitTransform:"scale(1) rotate(0deg)",msTransform:"scale(1) rotate(0deg)",transform:"scale(1) rotate(0deg)",opacity:"0"}).show();$(".ss-slide:first").css({opacity:"1"})})}function zoomIn(){captionUpdater();paginateForwards();$(".ss-slide:last").addClass("notrans").fadeOut("slow",function(){$(this).prependTo(".ss-slides").removeClass("notrans").css({webkitTransform:"scale(1) rotate(0deg)",msTransform:"scale(1) rotate(0deg)",transform:"scale(1) rotate(0deg)"}).show();$(".ss-slide:last").css({webkitTransform:"scale(1.2)  rotate(2deg)",msTransform:"scale(1.2)  rotate(2deg)",transform:"scale(1.2)  rotate(2deg)"})})}function zoomOut(){captionUpdater();paginateForwards();$(".ss-slide:eq(-2)").addClass("notrans").css({webkitTransform:"scale(1.2) rotate(2deg)",msTransform:"scale(1.2) rotate(2deg)",transform:"scale(1.2)...