jsFiddle

• Run again
• Edit this fiddle

• JavaScript
• HTML
• CSS
• Result

jQuery.extend(jQuery.easing, {
    easeOutCirc: function(x, t, b, c, d) {
        return c * Math.sqrt(1 - (t = t / d - 1) * t) + b;
    }
});

var itemWidth = 161 + 12;
var sliderWidth = $('#wardrobe_slider').children().size() * itemWidth;

$('#wardrobe_slider').css('width', sliderWidth);

var sliderPageWidth = parseInt($('#wardrobe_items').css('width'));

var eventInterrupted = function(sliderDirection) {
    $('#wardrobe_slider').stop(true, true);
    if (sliderDirection == 0) {
        sliderAnimateRight();
    } else {
        sliderAnimateLeft();
    }
};

var sliderAnimateRight = function() {
    var leftPos = $('#wardrobe_slider').position().left - 5;
    if (sliderWidth + leftPos <= sliderPageWidth) return false;
    if ((sliderWidth + leftPos) % itemWidth != 0) {
        eventInterrupted(0);
        return false;
    }
    $('#wardrobe_slider').animate({
        left: leftPos - itemWidth + 'px'
    }, 1000, 'easeOutCirc');
    return false;
};

var sliderAnimateLeft = function() {
    var leftPos = $('#wardrobe_slider').position().left - 5;
    if (leftPos >= 0) return false;
    if (leftPos % itemWidth != 0) {
        eventInterrupted(1);
        return false;
    }
    $('#wardrobe_slider').animate({
        left: leftPos + itemWidth + 'px'
    }, 1000, 'easeOutCirc');
    return false;
};

$('#wardrobe_prev').click(function() {
    sliderAnimateLeft();
    return false;
});

$('#wardrobe_next').click(function() {
    sliderAnimateRight();
    return false;
});

<div id="wardrobe">
    <img id="wardrobe_label" src="http://dashasalo.com/files/2011/12/wardrobe_label.png" alt="Wardrobe">
    <a href="#" id="wardrobe_prev" class="ir">Previous</a>
    <div class="items" id="wardrobe_items">
        <div id="wardrobe_slider">
            <div class="wardrobe_item">
                <img src="http://dashasalo.com/files/2011/12/dress2.png">
            </div>
            <div class="wardrobe_item">
                <img src="http://dashasalo.com/files/2011/12/dress3.png">
            </div>
            <div class="wardrobe_item">
                <img src="http://dashasalo.com/files/2011/12/dress4.png">
            </div>
            <div class="wardrobe_item">
                <img src="http://dashasalo.com/files/2011/12/dress2.png">
            </div>
            <div class="wardrobe_item">
                <img src="http://dashasalo.com/files/2011/12/dress3.png">
            </div>
            <div class="wardrobe_item">
                <img src="http://dashasalo.com/files/2011/12/dress4.png">
            </div>
            <div class="wardrobe_item">
                <img src="http://dashasalo.com/files/2011/12/dress2.png">
            </div>
            <div class="wardrobe_item">
                <img src="http://dashasalo.com/files/2011/12/dress3.png">
            </div>
        </div>
    </div>
    <a href="#" id="wardrobe_next" class="ir">Next</a>
</div>

body { background: #444; padding: 20px 20px;}

.ir { display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; }

#wardrobe {
    position: relative;
    padding-top: 15px;
    width: 705px;
}

#wardrobe #wardrobe_prev {
    position: absolute;
    background: transparent url('http://dashasalo.com/files/2011/12/controls_left.png') 0 0 no-repeat;
    display: block;
    width: 17px;
    height: 35px;
    left: -16px;
    top: 57px;
    outline: 0;
}
#wardrobe #wardrobe_next {
    position: absolute;
    background: transparent url('http://dashasalo.com/files/2011/12/controls_right.png') 0 0 no-repeat;
    display: block;
    width: 18px;
    height: 34px;
    right: -16px;
    top: 57px;
    outline: 0;
}

#wardrobe #wardrobe_label {
    position: absolute;
    top: 0;
    left: 12px;
    z-index: 100;
}

#wardrobe .items {
    background: #fff;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    height: 122px;
    padding: 0 5px;
    overflow: hidden;
}
#wardrobe_slider {
    left: 0;
    position: relative;
    z-index: 5;
}
#wardrobe .wardrobe_item {
    -moz-box-shadow:inset 0 0 21px #f0e8dd;
    -webkit-box-shadow:inset 0 0 21px #f0e8dd;
    box-shadow:inset 0 0 21px #f0e8dd;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    width: 161px;
    height: 102px;
    line-height: 102px;
    float: left;
    margin:10px 6px;
    text-align: center;
    position: relative;
}
#wardrobe .wardrobe_item:hover {
    cursor: pointer;
}
#wardrobe .wardrobe_item img {
    vertical-align: middle;
}