animating divs in a simple slider way using jquery

[dandan]

I want to make a simple slider that animates inner divs(".SliderWrapper") from left to right and right to left, I made some changes and I managed to do right animations and also left animations, but it only works when they move only in right direction o left direction, for example if I hit right button("#RightArrow") twice and the hit left button("#LeftArrow") twice after that, the slider will collapse after while and it will be completely useless! please help me to make better functionality for this slider,I'm really confused! thanks. here is my client side code(I'm using asp.net repeater because i load the images dynamically, it will load 5 images) :\[code\].SliderContainer { width: 725px; height: 100%; margin: auto; overflow: hidden; position:relative; } .SliderWrapper { width: 99%; height: 99%; margin: auto; position: absolute; } .SliderArrows { width: 28px; height: 50px; position: absolute; top: 100px; background-position: center top; /*some background for each arrow*/ background-repeat: no-repeat; cursor: pointer; } <div class="SliderContainer"> <asp:Repeater ID="RepeaterSlider" runat="server"> <ItemTemplate> <div class="SliderWrapper" index='<%# RepeaterSlider.Items.Count %>'> <div class="SliderLeft"> <div class="Slidertitle"> <asp:Label ID="LabelSliderTitle" Text="test" CssClass="value" runat="server" /> </div> <div class="SliderContent"> <asp:Label ID="LabelSliderContent" Text="this is very good and ..." CssClass="content" runat="server" /> </div> </div> <div class="SliderRight"> <asp:Image ID="ImageSlider" ImageUrl='<%# Eval("FilePath") %>' runat="server" ClientIDMode="Static" /> </div> </div> </ItemTemplate> </asp:Repeater> </div><script> function Move(elem, direction) { if (direction == "right") { $(elem).animate({ right: "-=720px" }, 1000, function () { $(elem).stop(true, true); }); } else if (direction == "left") { $(elem).animate({ right: "+=720px" }, 1000, function () { $(elem).stop(true, true); }); } } $(document).ready(function(){ //placing wrappers in the page $(".SliderWrapper").each(function () { var index = $(this).attr("index"); $(this).css("right", index * (720) + "px"); }); var slidenum = $(".SliderWrapper").length; var lastslide = $(".SliderWrapper[index=" + (slidenum - 1).toString() + "]"); var firstslide = $(".SliderWrapper[index=0]"); $("#RightArrow").click(function () { if ($(lastslide).css("right") == "0px") { if ($(lastslide).prev().attr("class") == "SliderWrapper") { lastslide = $(lastslide).prev(); } else { //all wrappers were leader once, noew reset lastslide = $(".SliderWrapper[index=" + (slidenum - 1).toString() + "]"); } $(".SliderWrapper").each(function () { if ($(this).css("right") != "0px") { $(this).css("right", "+=" + ((slidenum) * 720).toString() + "px"); } }); } Move($(".SliderWrapper"), "right"); }); $("#LeftArrow").click(function () { if ($(firstslide).css("right") == "0px") { if ($(firstslide).next().attr("class") == "SliderWrapper") { firstslide = $(firstslide).next(); } else { //all wrappers were leader once, noew reset firstslide = $(".SliderWrapper[index=0]"); } $(".SliderWrapper").each(function () { if ($(this).css("right") != "0px") { $(this).css("right", "-=" + ((slidenum) * 720).toString() + "px"); } }); } Move($(".SliderWrapper"), "left"); }); //slide right by default setInterval(function () { if ($(lastslide).css("right") == "0px") { if ($(lastslide).prev().attr("class") == "SliderWrapper") { lastslide = $(lastslide).prev(); } else { //all wrappers were leader once, noew reset lastslide = $(".SliderWrapper[index=" + (slidenum - 1).toString() + "]"); } $(".SliderWrapper").each(function () { if ($(this).css("right") != "0px") { $(this).css("right", "+=" + ((slidenum) * 720).toString() + "px"); } }); } Move($(".SliderWrapper"), "right"); },5000) });</script>\[/code\]