Simple jquery slider

HTML

<div id="left"> <a href="#target1" class="panel">Target 1</a>
    <br/> <a href="#target2" class="panel">Target 2</a>
    <br/> <a href="#target3" class="panel">Target 3</a>
    <br/> <a href="#target4" class="panel">Target 4</a>
    <br/>
</div>
<div id="right">
    <div class="panel" id="target1">
        <img src="http://placehold.it/400x200/06A2CB/274257&text=jQuery" alt="" />
    </div>
    <div class="panel" id="target2">
        <img src="http://placehold.it/400x200/218559/C7E1BA&text=Horizontal" alt="" />
    </div>
    <div class="panel" id="target3">
        <img src="http://placehold.it/400x200/EBB035/644436&text=Image" alt="" />
    </div>
    <div class="panel" id="target4">
        <img src="http://placehold.it/400x200/A84A5C/fff&text=Slider" alt="" />
    </div>
</div>

$('a.panel').click(function () {
    var $target = $($(this).attr('href')),
        $other = $target.siblings('.active');

    if (!$target.hasClass('active')) {
        $other.each(function (index, self) {
            var $this = $(this);
            $this.removeClass('active').animate({
                left: $this.width()
            }, 500);
        });

        $target.addClass('active').show().css({
            left: -($target.width())
        }).animate({
            left: 0
        }, 500);
    }
});
$('a.panel').click();

DEMO