Image sliding(clockwise) with next and previous buttons in asp.net using jquery

See more:

C#

ASP.NET

C#4.0

jQuery

Hi coders,

I am doing simple images with sliding using Jquery.

Here My requirement is:
3 images should round trip like
I have 3 slides slide1,slide2 and slide3

when I click next in slide1, slide2 will come from right side.(working)
When I click next in slide2, slide3 will come from right side.(working)
when I click next in slide3, slide1 will come from right side.(not working)

This is reversal when I click previous button.

Below is my code:

$(function () {
var currentPosition = 0;
var slideWidth = 500;
var slides = $('.slide');
//var numberOfSlides = slides.length;
slides.wrapAll('<div id="slidesHolder"></div>')
slides.css({ 'float': 'left'
});
$('#slideshow').prepend('<span class="nav" id="leftNav">Move Left</span>')
.append('<span class="nav" id="rightNav">Move Right</span>');
$('.nav').bind('click', function () {
    if(($(this).attr('id') == 'rightNav'))
    {
        if(currentPosition==0)
        {
        currentPosition=currentPosition + 1
        }
        else if(currentPosition==1)
        {
           currentPosition=currentPosition + 1
        }
        else if(currentPosition==2)
        {
           currentPosition=0
        }
    }
    if(($(this).attr('id') == 'leftNav'))
    {
if(currentPosition==0)
        {
        currentPosition=currentPosition +2
        }
else if(currentPosition==1)
        {
           currentPosition=currentPosition - 1
        }
        else if(currentPosition==2)
        {
           currentPosition=currentPosition - 1
        }
    }
    moveSlide();    
});
    
function moveSlide() {
$('#slidesHolder').animate({ 'marginLeft': slideWidth * (-currentPosition) });
};
});

And my Html code:

<div id="slideshow">
<div id="slideshowWindow">
<div class="slide">
<img src="http://www.webchief.co.uk//blog/simple-jquery-slideshow/slide1.jpg" />
</div>
<div class="slide">
<img src="http://www.webchief.co.uk//blog/simple-jquery-slideshow/slide2.jpg" />
</div>
<div class="slide">
<img src="http://www.webchief.co.uk//blog/simple-jquery-slideshow/slide3.jpg" />
</div>
</div>
</div>

And my Css Code:

#slideshow {
position: relative;
}
#slideshow #slideshowWindow {
height: 257px;
margin: 0;
overflow: hidden;
padding: 0;
position: relative;
width: 500px;
}
#slideshow #slideshowWindow .slide {
height: 257px;
margin: 0;
padding: 0;
position: relative;
width: 500px;
}
#slideshow #slideshowWindow .slide .slideText {
background-image: url("http://www.webchief.co.uk//blog/simple-jquery-slideshow/greyBg.png");
background-repeat: repeat;
color: #FFFFFF;
font-family: Myriad Pro,Arial,Helvetica,sans-serif;
height: 130px;
left: 0;
margin: 0;
padding: 0;
position: absolute;
top: 130px;
width: 100%;
}
#slideshow #slideshowWindow .slide .slideText a:link, #slideshow #slideshowWindow .slide .slideText a:visited {
color: #FFFFFF;
text-decoration: none;
}
#slideshow #slideshowWindow .slide .slideText h2, #slideshow #slideshowWindow .slide .slideText p {
color: #FFFFFF;
margin: 10px 0 0 10px;
padding: 0;
}
.nav
{
display:block;
text-indent:-10000px;
position:absolute;
cursor:pointer;
}
#leftNav
{
top:223px;
left:320px;
width:94px;
height:34px;
background-image:url(http://www.webchief.co.uk/blog/simple-jquery-slideshow/previous.png);
background-repeat:no-repeat;
z-index:999;
}
#rightNav
{
top:225px;
left:450px;
width:53px;
height:26px;
background-image:url(http://www.webchief.co.uk/blog/simple-jquery-slideshow/next.png);
background-repeat:no-repeat;
z-index:999;
}

Here my problem is if I am in the last slide at this point of time if I click next button it should move left and first slide should come to the place from right side.
At the same time if I am in the first slide at this point of time if I click previous button it should move right and last slide should come to the place from left side.

This is not happening, please modify is any thing wrong in my code.