Creating a simple li slider (infinate or with 'rewind'/stop) <p>So far I've got scrolling list items on click using the code below:</p> <pre><code>$('li#news-back').click(function(){ $('li.news-item').animate({ left : '-=960px' }); //$('li.news-item:first').insertAfter('li.news-item:last'); }); $('li#news-forward').click(function(){ $('li.news-item').animate({ left : '+=960px' }); //$('li.news-item:last').inserBefore('li.news-item:first'); }); </code></pre> <p>Each list item is 960px wide , items are floated left and only one item is shown in the container at any given time. Clicking back for forward will animate the li by their width making the next or previous visible..</p> <p>The problem is that for now there are 4 items. So I either need to add the first item to the end or the list or the last to the beginning of the list when clicked as the code I've commented out. </p> <p>Watching this in firebug it seems to be rearranging the content as I hoped but it's not working so within the browser (getting some very odd results - jumping to the 3rd when the second should be visible etc).</p> <p>The other solution perhaps would be to use an if statement to say (was we're manipulating the left property) - when back is click if left = 0 do nothing or alert there are no more in the list - then if forward is click to say if left = 2880 do nothing as you'll be at the end of the list..</p> <p>Any pointers greatly appreciated.</p>