Custom slider with scale, blur and position transition

by Paf_Sebastien

HTML

<div class="slider-wrapper">
    
    <a href="#" id="prev">Previous</a>
    <a href="#" id="next">Next</a>
            
    <img class="people" src="http://lorempixel.com/200/400/abstract/1">
    <img class="people" src="http://lorempixel.com/200/400/abstract/2">
    <img class="people" src="http://lorempixel.com/200/400/abstract/3">
    <img class="people" src="http://lorempixel.com/200/400/abstract/4">
    <img class="people" src="http://lorempixel.com/200/400/abstract/5">
    <img class="people" src="http://lorempixel.com/200/400/abstract/6">
    <img class="people" src="http://lorempixel.com/200/400/abstract/7">
    <img class="people" src="http://lorempixel.com/200/400/abstract/8">
    <img class="people" src="http://lorempixel.com/200/400/abstract/9">
    <img class="people" src="http://lorempixel.com/200/400/abstract/10">
            
</div>

CSS

.slider-wrapper {
    width: 100%; height: 100%;
    position: absolute;
    top: 0; left: 0;
    overflow: hidden;
}

.people {
    position: absolute;
    
    -webkit-transition: 1s;
    -moz-transition: 1s;
    -ms-transition: 1s;
    -o-transition: 1s;
    transition: 1s;
}

JavaScript

// Slider parameters.
var posLefBasis = 20,
    posBotBasis = 0,
    gapX        = 20,
    gapY        = 10,
    posX        = 0,
    posY        = 0,
    scale       = 0,
    blur        = 0,
    z           = 0;

function initPeopleSlider()
{
    $('.people').each(function(i, el)
    {
        // Here's your number, guy.
        $(el).data({pos: i, origin: i});
        
        posX  = posLefBasis + i*gapX + '%';
        posY  = posBotBasis + i*gapY + '%';
        scale = 1 - i*4/10;
        blur  = i*4 + 'px';
        z     = i * -1;
        
        if (scale < 0) { scale = 0; }
        
        $(this).css({
            'left'   : posX,
            'bottom' : posY,
            'z-index': z,
            '-webkit-transform' : 'scale('+ scale +')',
            '-moz-transform'    : 'scale('+ scale +')',
            '-ms-transform'     : 'scale('+ scale +')',
            '-o-transform'      : 'scale('+ scale +')',
            'transform'         : 'scale('+ scale +')',
            'filter'         : 'blur('+ blur +')',
            '-webkit-filter' : 'blur('+ blur +')',
            '-moz-filter'    : 'blur('+ blur +')',
            '-o-filter'      : 'blur('+ blur +')',
            '-ms-filter'     : 'blur('+ blur +')'
        });
    });
}

function peopleSliderMove(value)
{
    var pos = 0;
    
    $('.people').each(function(i, el)
    {
        pos = $(el).data('pos') + value;
        $(el).data({pos: pos});
        
        posX  = posLefBasis + pos*gapX + '%';
        posY  = posBotBasis + pos*gapY + '%';
        scale = 1 - pos*4/10;
        blur  = pos*4 + 'px';
        
        if (scale < 0) { scale = 0; }
        
        $(this).css({
            'left'   : posX,
            'bottom' : posY,
            '-webkit-transform' : 'scale('+ scale +')',
            '-moz-transform'    : 'scale('+ scale +')',
            '-ms-transform'     : 'scale('+ scale +')',
            '-o-transform'      : 'scale('+ scale +')',
            'transform'         :...