jQuery: a better way to handle animated slideshows

by gabrieleromanato

HTML

<div id="slideshow">
    <div id="slideshow-wrapper">
        <div class="slide">
            <img src="https://lh6.googleusercontent.com/-bMhvREdJOC4/UIAdeSmo0wI/AAAAAAAABHY/33vvtv1LI_8/s200/1.jpg" alt="Product 1" 
            data-from='{"top": "-100px", "left":"-100px"}' data-to='{"top":"20px","left":"50px"}' data-easing="easeOutBounce"/>
            <p class="slide-caption">Product 1</p>
        </div>
        <div class="slide">
            <img src="https://lh3.googleusercontent.com/-GsjcdJi1JL8/UIAdfWlxBuI/AAAAAAAABHM/JkhlmDrLnyQ/s267/2.jpg" alt="Product 2" 
            data-from='{"bottom": "-100px", "left":"0"}' data-to='{"bottom":"20px","left":"60px"}' data-easing="easeOutElastic"/>
            <p class="slide-caption">Product 2</p>
        </div>
        <div class="slide">
            <img src="https://lh3.googleusercontent.com/-Aq9AtqiSiwo/UIAdhNW2ICI/AAAAAAAABHM/bTWfchQgOME/s301/4.jpg" alt="Product 3" 
            data-from='{"right": "-300px", "top":"50px"}' data-to='{"right":"240px","top":"80px"}' data-easing="easeOutExpo"/>
            <p class="slide-caption">Product 3</p>
        </div>
        <img src="https://lh6.googleusercontent.com/-6bhXHf5v0vQ/T8JahtOdeAI/AAAAAAAABBY/4B8dw7_jL-8/s66/loading.gif" id="loader" alt=""/>
    </div>
    <div id="slideshow-nav">
        <a href="#" data-slide="0">1</a>
        <a href="#" data-slide="1">2</a>
        <a href="#" data-slide="2">3</a>
    </div>
</div>

CSS

#slideshow {
    width: 100%;
    max-width: 500px;
    margin: 2em auto;
    font: 100%/1 Georgia, serif;
}

#slideshow-wrapper {
    height: 300px;
    border: 4px double #ddd;
    position: relative;
}

div.slide {
    width: 100%;
    height: 100%;
    position: relative;
    display: none;
    overflow: hidden;
}

.slide-caption {
    margin: 0;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    text-align: center;
    position: absolute;
    width: 200px;
    height: 100%;
    line-height: 300px;
    top: 0;
    right: -200px;
}

#loader {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -33px 0 0 -33px;
    display: none;
}

div.slide img {
    position: absolute;
    display: none;
}

#slideshow-nav {
    margin: 1em 0;
    text-align: center;
}

#slideshow-nav a {
    color: #fff;
    background: #000;
    text-decoration: none;
    display: inline-block;
    width: 2em;
    height: 2em;
    line-height: 2;
    margin-right: 1em;
}

JavaScript

jQuery.easing['jswing']=jQuery.easing['swing'];jQuery.extend(jQuery.easing,{def:'easeOutQuad',swing:function(x,t,b,c,d){return jQuery.easing[jQuery.easing.def](x,t,b,c,d);},easeInQuad:function(x,t,b,c,d){return c*(t/=d)*t+b;},easeOutQuad:function(x,t,b,c,d){return-c*(t/=d)*(t-2)+b;},easeInOutQuad:function(x,t,b,c,d){if((t/=d/2)<1)return c/2*t*t+b;return-c/2*((--t)*(t-2)-1)+b;},easeInCubic:function(x,t,b,c,d){return c*(t/=d)*t*t+b;},easeOutCubic:function(x,t,b,c,d){return c*((t=t/d-1)*t*t+1)+b;},easeInOutCubic:function(x,t,b,c,d){if((t/=d/2)<1)return c/2*t*t*t+b;return c/2*((t-=2)*t*t+2)+b;},easeInQuart:function(x,t,b,c,d){return c*(t/=d)*t*t*t+b;},easeOutQuart:function(x,t,b,c,d){return-c*((t=t/d-1)*t*t*t-1)+b;},easeInOutQuart:function(x,t,b,c,d){if((t/=d/2)<1)return c/2*t*t*t*t+b;return-c/2*((t-=2)*t*t*t-2)+b;},easeInQuint:function(x,t,b,c,d){return c*(t/=d)*t*t*t*t+b;},easeOutQuint:function(x,t,b,c,d){return c*((t=t/d-1)*t*t*t*t+1)+b;},easeInOutQuint:function(x,t,b,c,d){if((t/=d/2)<1)return c/2*t*t*t*t*t+b;return c/2*((t-=2)*t*t*t*t+2)+b;},easeInSine:function(x,t,b,c,d){return-c*Math.cos(t/d*(Math.PI/2))+c+b;},easeOutSine:function(x,t,b,c,d){return c*Math.sin(t/d*(Math.PI/2))+b;},easeInOutSine:function(x,t,b,c,d){return-c/2*(Math.cos(Math.PI*t/d)-1)+b;},easeInExpo:function(x,t,b,c,d){return(t==0)?b:c*Math.pow(2,10*(t/d-1))+b;},easeOutExpo:function(x,t,b,c,d){return(t==d)?b+c:c*(-Math.pow(2,-10*t/d)+1)+b;},easeInOutExpo:function(x,t,b,c,d){if(t==0)return b;if(t==d)return b+c;if((t/=d/2)<1)return c/2*Math.pow(2,10*(t-1))+b;return c/2*(-Math.pow(2,-10*--t)+2)+b;},easeInCirc:function(x,t,b,c,d){return-c*(Math.sqrt(1-(t/=d)*t)-1)+b;},easeOutCirc:function(x,t,b,c,d){return c*Math.sqrt(1-(t=t/d-1)*t)+b;},easeInOutCirc:function(x,t,b,c,d){if((t/=d/2)<1)return-c/2*(Math.sqrt(1-t*t)-1)+b;return c/2*(Math.sqrt(1-(t-=2)*t)+1)+b;},easeInElastic:function(x,t,b,c,d){var s=1.70158;var p=0;var a=c;if(t==0)return b;if((t/=d)==1)return b+c;if(!p)p=d*.3;if(a<Math.abs(c)){a=c;var...