How to make carousel go around?
<p>I have a carousel and it works well if you go left or right.
But i want it to loop instead of stop one way. I have got it to loop fine if the right hand arrow is clicked. But cant seem to work out the left hand.</p>

<p>script:</p>

<pre><code>  $('.carousel-next-page').click(function () {
        var carousel = $(this).parents('.carousel').find('ul');
        var scroll = carousel.scrollLeft();
        var w = carousel.width();
        var x = 0;
        carousel.find('li').each(function (i) {
            if ($(this).position().left &lt; w) {
                x = $(this).position().left;
            }
            if ($(this).position().left &lt; 0) {
                carousel.animate({ scrollLeft: 0 }, 'fast');
                return false;
            }
           // alert("this position = " + $(this).position().left + ", Width = "+ w + ", x = " + x)
        });
        carousel.animate({ scrollLeft: scroll + x }, 'fast');
        return false;
    });
    $('.carousel-prev-page').click(function () {
        var carousel = $(this).parents('.carousel').find('ul');
        var scroll = carousel.scrollLeft();
        var w = carousel.width();
        var x = 0;
        carousel.find('li').each(function (i) {
            if ($(this).position().left &lt; 1 - w)
            {
                x = $(this).position().left;
            }

            //if ($(this).position().left &gt; 0) {
            //    carousel.animate({ scrollLeft: carousel.find('li:last').position().left }, 'fast');
            //    return ;
            //}               

        });
        if (x == 0) {
            carousel.animate({ scrollLeft: 0 }, 'fast');
        } else {
            carousel.animate({ scrollLeft: scroll + x }, 'fast');
        }
        return false;
    });
</code></pre>

<p>HTML:</p>

<pre><code>&lt;div class="carousel"&gt;        
       &lt;div class="float-left" style="margin-top:25px;"&gt;                
            &lt;a href="#" class="carousel-prev-page"&gt;&lt;span&gt;&lt;img src="/gfx/smallLeftArrow.png" alt=""&gt;&lt;/span&gt;&lt;/a&gt;
       &lt;/div&gt;
       &lt;ul&gt;
                &lt;li&gt;
                    &lt;img src="/slideshow/a8902970-b083-4bc7-a05d-eb296771ffd0.png"&gt;
                &lt;/li&gt;
                &lt;li&gt;
                    &lt;img src="/slideshow/59af2104-c73d-4f1f-91c6-476c1da47420.png"&gt;
                &lt;/li&gt;                    

                &lt;li&gt;
                    &lt;img src="/slideshow/f225100a-d8bf-4dc9-b552-01db65c110b3.png"&gt;
                &lt;/li&gt;
                &lt;li&gt;
                    &lt;img src="/slideshow/7efbf5d5-fcdd-4127-b8cf-5a36d5a507a8.png"&gt;
                &lt;/li&gt;
                &lt;li&gt;
                    &lt;img src="/slideshow/b1b9184f-aaed-4658-9fbe-5fc3b86975d1.png"&gt;
                &lt;/li&gt;
                &lt;li&gt;
                    &lt;img src="/slideshow/a3b493b5-6302-44f8-83e0-2a3a060013e6.png"&gt;
                &lt;/li&gt;
                &lt;li&gt;
                    &lt;img src="/slideshow/cac1b555-e155-48d8-960f-00d25eaf2dde.png"&gt;
                &lt;/li&gt;
       &lt;/ul&gt;
        &lt;div class="float-left" style="margin-top:25px;"&gt;              
              &lt;a href="#" class="carousel-next-page"&gt;&lt;span&gt;&lt;img src="/gfx/smallRightArrow.png" alt=""&gt;&lt;/span&gt;&lt;/a&gt;
       &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>css:</p>

<pre><code>.carousel ul { overflow:hidden; white-space:nowrap; margin:0; padding:0; list-style:none; position:relative; width:700px; float:left; }

.carousel li { display:inline-block; }   

.carousel-prev-image, .carousel-next-image, .carousel-prev-page, .carousel-next-page
{
    width: 15px;
    height: 25px;
}

.carousel-prev-image, .carousel-prev-page
{
    margin-left:15px;
    margin-right:5px;
}

.carousel-next-image, .carousel-next-page
{
    margin-right:15px;
}
</code></pre>
