Advertisement

How to Build a Simple Content Slider jQuery Plugin

by

I was recently asked by a reader to recommend a helpful content slider plugin. No doubt, there are a bunch of excellent options available -- some which are, perhaps, too excellent! With so much flexibility comes extra weight; especially when sometimes you only need a simple slide or fade transition.

So I figured, why not build a simple custom plugin that will get the job done?

P.S. Speed Up

Don't forget to take advantage of bundles when working in Textmate. If you need a helpful snippet to jump-start every new jQuery plugin, create a new snippet in Textmate, paste the following code in, and then assign a short-cut - like "jqueryplugin."

(function(\$) {
	
	\$.fn.$1 = function(options) {

		var defaults = {
			$2
		},

		options = \$.extend(defaults, options);
	
		this.each(function() {
		
			var \$this = \$(this);		
			
			$3

            return this;
		
		}); // end each
	
	}
	
})(jQuery);

Conclusion

This is the only the first step. In the next screencast, we'll continue refining this plugin, and adding more options/conveniences.

Advertisement