jQuery - Image Slider Not Working

Question

So I am trying to make an image slider with jQuery. The images are kept in line and the images are sliding from right to left. Here is the code:

HTML:

<div id="1" style="width: 100%; min-height: 100%; display: inline;"><img src="1.png" /></div>
<div id="2" style="width: 100%; min-height: 100%; display: inline;"><img src="2.png" /></div>
<div id="3" style="width: 100%; min-height: 100%; display: inline;"><img src="3.png" /></div>

And here's the jQUery:

$(document).ready(function(){
    i = 1
    setInterval(function(){
        $("html, body").animate({
            marginLeft: -($("#"+i).offset().left/2)
        }, 1500, "swing");
        i = ++i % 4;
        if(i==0) i = 1
        console.log(i);
    }, 2500);

});

What I expect is: Obivo, to slide images one by one and if it's the third image then the first image should come up again and so on..

The problem is that this doesn't always slides the right way. Sometimes it just moves only 1px and sometimes it moves perfectly and sometimes it just makes the body animate to extreme right. To get you cleared, here is a fiddle .

Answer 1

As I sayed in the comment ID's cannot start with number. So try changing it like

<div id="mydiv_1" ...
<div id="mydiv_2" ...
<div id="mydiv_3" ...

and change it here

...
marginLeft: -($("#mydiv_"+i).offset().left/2)
... 

Answer 2

So I solved the problem by changing the algo and did this:

$(document).ready(function () {
    i = 1
    setInterval(function () {
        $("html, body").animate({
            marginLeft: -(($("#mydiv" + i).width()*i)/2)
        }, 1500, "swing");
        ++i;
        if(i == 3) i = 0
        console.log(i);
    }, 2500);

});

Just removed the offset thing and used width()*i to make it work the right way. :)

Answer 3

May be this will help you to have rotating effect,

Simple CSS will be :

 #mainDiv {
        position: relative;
        width: 980px;
        height: 347px;
    }

    .images {
        display: none;
        position: absolute;
        top: 0;
        left: 0;
    }

HTML :

<div id="mainDiv">
    <img class="images" src="~/1.jpg" width="980" height="347" />
    <img class="images" src="~/2.jpg" width="980" height="347" />
    <img class="images" src="~/3.jpg" width="980" height="347" />
</div>

Javascript:

$(window).load(function () {
    var ImageRotator =
    {
        init: function () {
            var initialFadeIn = 1000;
            var itemInterval = 2500;
            var fadeTime = 1500;

            var numberOfItems = $('.images').length;
            var currentItem = 0;
            $('.images').eq(currentItem).fadeIn(initialFadeIn);
            var imageLoop = setInterval(function () {
                $('.images').eq(currentItem)
                 .fadeOut(fadeTime);

                if (currentItem == numberOfItems - 1) {
                    currentItem = 0;
                } else {
                    currentItem++;
                }
                $('.images').eq(currentItem)
                 .fadeIn(fadeTime);

            }, itemInterval);
        }
    };

    ImageRotator.init();

});