Create an iPhone-like content slider with jQuery

March 21, 2010 Freebies, Tutorials

As I’m sure you are well aware, jQuery is a great and efficient way to enhance your website. Using jQuery, you can display your content in a different way, promote user interaction, and stand out from the rest. Today we will learn how to create an iPhone inspired content slider with jQuery and Nathan Searles’ loopedSlider.

I chose loopedSlider for this slider for many reasons. Nathan Searles is constantly updating the plugin over at GitHub. All of the updates are great because they add new features, and fix any bugs that may come up. This also allows all of the users of the plugin to easily get the latest version of the plugin. I also chose loopedSlider because of all of its features.

About loopedSlider

Unlike other jQuery sliders out there, loopedSlider can do it all, and at only 10kb, or 6kb minified. LoopedSlider’s main attraction is having a constant stream of content. When you reach the end, the slider doesn’t have to slider all the way back to the beginning, it just places the first item after the last, and continues going. LoopedSlider can also use a variety of ways to navigate through the content. You can have pagination links to each slide, or a previous and next arrow. The pagination can also be added dynamically by jQuery, or hardcoded. If you chose, you can also set the scroll speed, auto start, fade speed and auto height.

The Theme

I created a custom theme based on loopedSlider inspired by the iPhone. This custom theme is easy to use and implement into any version of loopedSlider whether it be the current version, or any future versions Nathan Searles’ may put out. It is a full theme including themed pagination, previous button, and a next button with all of the active, hover and “current slide” effects. The complete package, including the CSS, images, demo and jQuery scripts, are available below.

Further Resources

For more information on loopedSlider and the latest versions, visit its home at GitHub.