Jquery slider: horizontal image slider

This is my first post in stackoverflow and I am beginning in JQuery programming too. I was trying to make my own Jquery image slider and I want the image to slider from right to left but the image kept slider from the top left corner I couldn't nkow why?

Here is the fiddle http://jsfiddle.net/rAqcP/193/

my css is:

.slider {
width:100%;
height:400px;
overflow:hidden;
background-image:url("http://test.softvex.com/Slider/Img/loading.gif");
background-repeat:no-repeat;
background-position:center;}
    .slider img {
    width:100%;
    height:400px;
    display:none;
}

My JS is:

$(document).ready(function() {

$('.slider #1').show({right:'0'}, 500);
$('.slider #1').delay(5500).hide('slide', 'linear', 500);

var sliderTotalImg = $('.slider img').size();
var counterIndex = 2;

setInterval(function () {
    $('.slider #' + counterIndex).show({right:'0'}, 500);
    $('.slider #' + counterIndex).delay(5500).hide('slide', 'linear', 500);

    if (counterIndex == sliderTotalImg) {
        //reset counter
        counterIndex = 1;
    }
    else {
        counterIndex = counterIndex + 1;
    }
},6500);});

and lastly my markup

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<div class = "slider">
 <img id="1" src="http://test.softvex.com/Slider/Img/photography/001.jpg"/>
 <img id="2" src="http://test.softvex.com/Slider/Img/photography/003.jpg"/>
</div>

Thanks for helping