jQuery Presentation Plugin: Say NO to Keynote!

Trevor Davis, Former Front-End Development Technical Director

Article Category: #Code

Posted on

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.

Related Articles