jQuery Presentation Plugin: Say NO to Keynote!

I think I’m going to stop using Keynote & Powerpoint forever.

At Viget, we get the opportunity to present a topic to the rest of the company; we call them Lab Shares. This gives us all the chance to work on our presentation skills and to help educate others. I’m giving my presentation next week and will talk about CSS3 transforms and transitions. Obviously, I will be providing a lot of code samples and examples, so if I were to use Keynote, I would be going back and forth between the browser and Keynote. Yeah, no thanks.

So, I wrote this small jQuery plugin that gives you an interface in a browser to give a presentation. If you are getting antsy, take a look at a demo or download it from github.

You can navigate the presentation by using the left & right arrows, the previous & next links, and the individual page links. The plugin is very basic, and here is an example of the markup:

<div id="slides">
	<div class="slide"> Slide 1 </div>
	<div class="slide"> Slide 2 </div>
	<div class="slide"> Slide 3 </div>
</div>

Then, make sure you include the jQuery library and my presentation plugin, and then you can call it like this:

$(document).ready(function() {
	$('#slides').presentation();
});

And that’s it. There are a few options you can pass in that are documented on github, but most people probably won’t need them.

So check out the demo and download it. Let me know if there is anything you think I can add to the plugin in the comments.

Trevor is a senior front-end developer who specializes in writing bulletproof code for clients including the World Wildlife Fund and GoPole.

More posts by Trevor