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 same directory as the jquery.slider.js file and the jQuery library.
How to do it…
Perform the following steps to create your image and a content slider plugin:
Add the following HTML to
recipe-3.html:<!DOCTYPE html> <html> <head> ...
