Question

I am trying to make this jquery carousel work with different widths. Right now there is a bunch of white space on the end before it repeats.

How can I clear that white space at the end?

Here is my jsfiddle.

http://jsfiddle.net/A4sZb/

Answer 1

What’s Going Wrong

The carousel works by displaying a horizontal list of icons. When rotating through the icons, the carousel is simply shifting the list left and right using CSS. The whitespace at the end happens because you have all of your list elements off to the left. Then, when you click "Next" again, all of your elements shift back to the far right.

How to Fix It

Like Dutchie432 said, you need to re-append the off-screen items. The functionality of taking an element from the beginning and making it show up at the end again is not something that you can do with just CSS modifications; you need to write some JavaScript/jQuery code to actually modify the DOM.

Sample Implementation

Using jQuery, you can select the first or last items in your list using the :first or :last selector. When the user clicks the "Next", select the first list element, remove it, and append it to the end of your carousel list. Looping your list elements like this will have to take place after you’ve done the animated shift. Obviously, you’ll want to have some way of checking if the first/last item is no longer visible before you move it. Also, you’ll need to make sure that once you remove the first item and put it on the end, you shift your list elements to compensate for the missing image width.