Advertisement
News

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?


Other Viewing Options

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.

Thank you, Screencast.com!


Screencast.com

...for providing the hosting for these video tutorials.


Related Posts
  • Web Design
    eCommerce
    Taking Shopify Theme Development FurtherShopify thumb
    In this final part of our Shopify series we will look at how a deeper knowledge of Liquid will enable you to make your themes even more flexible. This will help you deliver richer and more imaginative store designs.Read More…
  • Code
    JavaScript & AJAX
    Managing Your Build Tasks With Gulp.jsGulpjs retina preview
    The benefits of task runners in software development is obvious. They help to automate common, often tedious tasks and let you squarely focus on more important things, like writing awesome code. Seriously though, the ability to automate tasks such as image compression, minification, unit testing and much more is a huge time saver.Read More…
  • Code
    Creative Coding
    Creating a TextMate Bundle to Easily Package Your WordPress ProjectTextmate bundle 400
    If you've developed a WordPress theme or plugin, then you know how fast your codebase can grow in just a short amount of time. You start off with just a few PHP, JavaScript and CSS files. Then you find yourself creating image assets and adding them to your codebase together with their Photoshop file counterparts. After a while you'll be including other third-party PHP libraries as well. Then when you're finally ready to ship your WordPress project, you'll end up having a web of multiple file types like *.php, *.css, *.scss, *.js, *.min.js, *.png and *.psd, maybe you'll have some hidden files like .DS_Store. You would eventually need to clean your codebase up before zipping them all up for your users. Normally, this just means that you duplicate your files, then scan each and every directory deleting all the unwanted files. You'd then archive your project then perhaps use a third party app to remove the hidden files. This article will teach you on how to automate this packaging process by building a TextMate Bundle that would do everything for us with a single shortcut key. [tip]This article teaches about some tips regarding TextMate, an awesome code editor for Macs. You can find more information on TextMate from MacroMate's website[/tip]Read More…
  • Code
    JavaScript & AJAX
    JavaScript Tools of the Trade: JSBinJsbin retina preview
    We've all been there. There are times when you simply want to throw some JavaScript code up and see how it works. Sure, you could go through the hassle of:Read More…
  • Code
    JavaScript & AJAX
    Ember.js TestingEmber components retina preview
    When I started playing around with Ember.js almost a year ago, the testability story left something to be desired. You could unit test an object without any trouble, but a unit test is only one way to get feedback when you're building a software product. In addition to unit tests, I wanted a way to verify the integration of multiple components. So like most people testing rich JavaScript applications, I reached for the mother of all testing tools, Selenium.Read More…
  • Code
    JavaScript & AJAX
    Testing in Node.jsNodejs testing chai retina preview
    A test driven development cycle simplifies the thought process of writing code, makes it easier, and quicker in the long run. But just writing tests is not enough by itself, knowing the kinds of tests to write and how to structure code to conform to this pattern is what it's all about. In this article we will take a look at building a small app in Node.js following a TDD pattern.Read More…