Slideshow with jmpress.js

You have for sure already seen impress.js, a really great JavaScript library for creating extraordinary 3D presentations. The jQuery port jmpress.js let’s you use this library as a jQuery plugin with some added options. We want to show you today how to use this great plugin to create a responsive slideshow with 3D effects.

The Markup

We will have a main container which is a section with the class jms-slideshow. Inside, we’ll have sevaral divisions with the class step. These will be our single slides. Each step or slide will get a data-color class for it’s background color and some data attributes of jmpress.js. You can find all (inline) options here: jmpress.js Documentation – Options. We’ll use some attributes in order to define the position and rotation of the slides in 3D space:

The background color classes will be applied to the previous wrapper. The class is defined in the data atrribute data-color in each step. This gives us the possibility to add a background color for each slide and change it with a transition. (The duration of the transition will be re-defined in the JavaScript.)

The JavaScript

We will be using the jmpress.js plugin to create our slideshow. Although you can make use of a lot of its functionality, we will just use the necessary parts to build our script. You can read more about the possibilities and options that jmpress.js offers here.

We will create a jQuery plugin for the slideshow. We can call the plugin like this:

$( '#jms-slider' ).jmslideshow();

The options for the jmpress plugin are defined as default options in our plugin (note that you can specify more than the ones listed):

Mary Lou (Manoela Ilic) is a freelance web designer and developer with a passion for interaction design. She studied Cognitive Science and Computational Logic and has a weakness for the smell of freshly ground peppercorns.

@ Julian:
If you removed these: data-x=”2000″ data-y=”1000″ data-z=”3000″ data-rotate=”-20″
on “steps”, then only last button works. You need to keep them. I was trying to remove them since I don’t like animation (and just keep fade in/out) but no luck.

@jojo:
you can change it on line 41 on jquery.jmslideshow.js
just make changes to numbers on a line that looks like this:
interval : 7000

I have a question. Let’s say I want to use this gallery to be used for responsive content (not just images) like have blog posts, maybe some featured article etc. By being responsive in the layout, my height is going to change with each slide, because somewhere the text is going to break lines etc. How would I modify the plugin so instead of having fixed height and responsive width, I have responsive width AND responsive height? is that even possible in this case? Thanks

Hello there, thanks for a wonderful tutorial. I’m now trying to implement this in my website and I want it to be controlled by the keyboard “left” and “right” arrows too. But, when I change the value of keyboard : {use:false}, to keyboard : {use:false}, it doesn’t work. Can you or anybody help me?