Slider

HTML

<div class="container">
    <div class="wrapper inactive">
        <div>1</div>
    </div>
    <div class="wrapper inactive">
        <div>2</div>
    </div>
    <div class="wrapper inactive">
        <div>3</div>
    </div>
</div>

CSS

.container
{
    overflow: hidden;
    width: 100%;
    position: relative;
    height: 200px;
    border: 1px solid;
}

.container .wrapper
{
    position: absolute;
    width: 0px;
}

.container div.inactive
{
    display: none;
}

JavaScript

function show(idx)
{
    var $oldOuter = $('.container .wrapper').not('.inactive');
    var $oldInner = $oldOuter.children().eq(0);
    
    var $newOuter = $('.container').children().eq(idx);
    var $newInner = $newOuter.children().eq(0);
    
    $newOuter
        .css({left: "0%"}).removeClass('inactive')
        .animate({left: "50%"});
    $newInner
        .css({marginLeft: -$newInner.outerWidth()})
        .animate({marginLeft: -$newInner.outerWidth()/2},1000);
    
    
    $oldOuter
        .css({left: "50%"})
        .animate({left: "100%"});
    $oldInner
        .css({marginLeft: -$oldInner.outerWidth()/2})
        .animate(
            {marginLeft: 0},
            1000,
            function()
            {
                $(this).addClass('inactive');
            });
}
show(0);
setTimeout(function(){show(1)},2000);