In March of 2010, NetTuts posted How to Create a Simple iTunes-like Slider to show how to create a carousel slider similar to the type found in iTunes under the App Store link (or in the App Store app on Mac OS).

The tutorial was great but there were some other features we wanted to implement. We set out to make the following changes:

  • Continuous scrolling of the images (no scrolling back to the top)
  • Scroll the thumbnails downward
  • Hide the next link until hover
  • Stop the cycling of images when the next link is clicked and wait 8 seconds until beginning again

Our CSS styles:

Our jQuery script:

And the markup: