Simple full-width slider.

Basically we have to set up an inner div, with 100% width. Our li's will be floated left, with 0 padding and margins, with 100% width, which will make our slider really full width (this width will be updated by javascript afterwards).

Then, by JS: count the number of li's, and their width; set the width of the slider container to a single slide width, and set the ul width to the total width (no of slides * width of each one).

For the animation, we need to have one 'reserve' slide. For that, we put the last slide on the begining of the ul and move the ul one 'slide' to the right. This enables us to have the last slide available when scrolling left on the first one.

So, for example, to scroll left, we need to:

• increase the left property of the ul (to see the slide to the lef)
• add a new 'reserve' slide, taking the last slide and preppending it to the ul
• when the DOM is updated, reset the ul style, setting the left property to 0