In this post, I will feature version 0.3 of Impulse Slider, a jQuery 3D slider plugin. The new version introduces support for many sorts of prism shapes: triangular, rectangular (or cubic), pentagonal and hexagonal prism  are now supported and in theory, any number of faces are supported. To make the used of the plugin easier, the following parameters were introduced:  depth, perspective,  images, imageDivClasses, degreesRotation.

We will demonstrate the new features by creating two demos: a pentagonal and an hexagonal prism.

 

Pentagonal Prism

 

impulse-slider-pentagon

 

[tboot_button color=”primary” size=”large” url=”http://www.twoimpulse.com/playground/?sample=impulse-slider-pentagonal” title=”Demo” target=”blank”]Demo[/tboot_button]


Download
270 downloads

Step 1 – Add markup

We add a slider container and a slider div (where the actual prisma will be created by the plugin).  We also place a div for the navigation buttons and assign it the “left” ,”right” and “pause” classes.

 Step 2 – CSS

We set the stylesheets for placing the navigation controls, and the divs. Note that I’m using a special font for the button controls.

 Step 3 – Hooking the plugin

The call to the impulse slider plugin makes use of the parameters provided by the plugin. Height , width, pause time, transition duration and other customer parameters are set.

We also set some of the new parameters mentioned above: depth, perspective, images and imageDivClasses. The plugin will determine the shape of the prism, by the amount of pictures set in the parameter.

 

 

Hexagonal Prism

 

impulse-slider-hexagon

 

[tboot_column_wrap]
[tboot_column size=”6″]

[tboot_button color=”primary” size=”large” url=”http://www.twoimpulse.com/playground/?sample=impulse-slider-hexagonal” title=”Demo” target=”blank”]Demo[/tboot_button]

[/tboot_column]
[tboot_column size=”6″]

[/tboot_column]
[/tboot_column_wrap]

 

 

Step 1 – Add markup

We add a container div, and a six divs to the slider div. As we’ve done before, we place a div for the navigation buttons and assign it the “left” ,”right” and “pause” classes.

In this example, we don’t add any images to the shape, to demonstrate the possibility of adding content to the prism.

 Step 2 – CSS

The CSS is almost the same as in the previous example. Since we haven’t added any images to the shape, we’re colouring them.

 Step 3 – Hooking the plugin

The new parameters  depth and perspective are set here.

 

Have fun!

[tboot_button color=”primary” size=”large” url=”http://www.twoimpulse.com/playground/?sample=impulse-slider-pentagonal” title=”Demo” target=”blank”]Demo[/tboot_button]


Download
270 downloads
Tagged with:

Author:

I'm a software developer interested in web and movbile application development. I enjoy creating great UX with tools like jQuery, CSS3 and many other frameworks. I'm also a fan of Grails.