Jquery Carousel not looping
<p>I'm currently working on a jQuery carousel which works fine in all browsers except from the fact that the last and first items aren't looping to create an infinite carousel</p>

<p>here's the js</p>

<pre><code>$(document).ready(function() {
    //move the last list item before the first item. The purpose of this is if the user clicks previous he will be able to see the last item.
    $('#profile-container ul li:first').before($('#profile-container ul li:last'));

    //when user clicks the image for sliding right
    $('#right_scroll img').click(function(){

        //get the width of the items ( i like making the jquery part dynamic, so if you change the width in the css you won't have o change it here too ) '
        var item_width = $('#profile-container ul li').outerWidth() + 20;

        //calculate the new left indent of the unordered list
        var left_indent = parseInt($('#profile-container ul').css('left')) - item_width;

        //make the sliding effect using jquery's animate function
        $('#profile-container ul').animate({'left' : left_indent},{queue:false, duration:500},function() {

            //THIS LINE ISN'T WORKING (it's how the infinite effects is made)
            $('#profile-container ul li:last').after($('#profile-container ul li:first'));

            //THIS LINE ISN'T WORKING
            $('#profile-container ul').css({'left' : '-100px'});
        });
    });

    //when user clicks the image for sliding left
    $('#left_scroll img').click(function(){

        var item_width = $('#profile-container ul li').outerWidth() + 20;

        /* same as for sliding right except that it's current left indent + the item width (for the sliding right it's - item_width) */
        var left_indent = parseInt($('#profile-container ul').css('left')) + item_width;

        $('#profile-container ul').animate({'left' : left_indent},{queue:false, duration:500},function(){

        /* THIS LINE ISN'T WORKING */
        $('#profile-container ul li:first').before($('#profile-container ul li:last'));

        /* THIS LINE ISN'T WORKING /*
        $('#profile-container ul').css({'left' : '-100px'});
        });

    });
});
</code></pre>

<p>for some reason the //get the first list item lines just aren't working.</p>

<p>Here's the html</p>

<pre><code>    &lt;div id="profile-wrapper"&gt;
        &lt;div id='left_scroll'&gt;&lt;img src="&lt;?php echo get_template_directory_uri(); ?&gt;/library/images/left.png" /&gt;&lt;/div&gt;  
        &lt;div id="profile-container"&gt;
            &lt;ul&gt;
                &lt;li&gt;&lt;a href="#" class="profile-image image-1"&gt;&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#" class="profile-image image-2"&gt;&lt;/a&gt;&lt;/li&gt; 
                &lt;li&gt;&lt;a href="#" class="profile-image image-3"&gt;&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#" class="profile-image image-4"&gt;&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#" class="profile-image image-5"&gt;&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
        &lt;/div&gt;
        &lt;div id='right_scroll'&gt;&lt;img src="&lt;?php echo get_template_directory_uri(); ?&gt;/library/images/right.png" /&gt;&lt;/div&gt;
    &lt;/div&gt;
</code></pre>

<p>and finally the css</p>

<pre><code>#profile-wrapper {
display: table;  
margin: 20px auto;
}

#profile-container {
float:left; /* important for inline positioning */  
width: 390px; /* important (this width = width of list item(including margin) * items shown */  
overflow: hidden;  /* important (hide the items outside the div) */ 
}

#profile-container ul {
position: relative;
left: -95px; /* important (this should be negative number of list items width(including margin) */
list-style-type: none; /* removing the default styling for unordered list items */
width:9999px; /* important */
/* non-important styling bellow */
margin-top: 20px;
padding-bottom:10px;
}

#profile-container ul li {
position: relative;
float: left; /* important for inline positioning of the list items */
width:80px;  /* fixed width, important */
/* non-important styling bellow */
background-color: #f5f5f5;
height: 80px;
border-radius: 95px;
-khtml-border-radius: 95px;
-moz-border-radius: 95px;
-webkit-border-radius: 95px;
margin-right: 20px;
z-index: 100;
}

#left_scroll, #right_scroll {
height: 80px; 
width: 80px;
-khtml-border-radius: 95px;
-moz-border-radius: 95px;
-webkit-border-radius: 95px;
position: relative;
z-index: 100;
float: left;
margin: 20px 20px;
}

#left_scroll img, #right_scroll img{
/*styling*/
cursor: pointer;
cursor: hand;
}

.image-1 {
background: url('../../library/images/profiles/1.jpg');
background-position: center;
}

.image-2 {
background: url('../../library/images/profiles/2.jpg');
background-position: center;
}

.image-3 {
background: url('../../library/images/profiles/3.jpg');
background-position: center;
}

.image-4 {
background: url('../../library/images/profiles/4.jpg');
}

.image-5 {
background: url('../../library/images/profiles/5.jpg');
background-position: center;
}

.profile-image {
display: block;
height: 70px;
width: 70px;
position: relative;
top: 5px;
left: 5px;
border-radius: 90px;
-khtml-border-radius: 90px;
-moz-border-radius: 90px;
-webkit-border-radius: 90px;
}
</code></pre>

<p>Any input would be helpful... think I've covered everything.</p>

<p>Many Thanks</p>

<p>Chris</p>
