jQuery 2.0 Development Cookbook

Building a content and image slider plugin

In Chapter 7, User Interface Animation, you were shown how to create a simple content slider using jQuery. This recipe will show you how to turn that recipe into a reusable jQuery plugin with the addition of being able to add images to the slider. You do not need to read the previous recipe to complete this one, but it is recommended to do so for you to get a better understanding of how the code works.

Getting ready

Copy the jquery.plugin-template.js file and rename it to jquery.slider.js, which will become the plugin for this recipe. You will also need to find an image 600 pixels wide and 250 pixels high that will be used in the slider. Finally, create recipe-3.html, slider.css, and recipe-3.js in the ...