Draggable Dual-View Slideshow with JavaScript

Draggable Dual-View Slideshow with JavaScript

An experimental slideshow that is draggable and has two views: fullscreen and small carousel. In fullscreen view, a related content area can be viewed.There are different techniques that would allow for such a layout; we tried to re-create this slideshow concept by using the Dragdealer.js library and 3D transforms. The main idea is to translate the slider on the Z axis, allowing it to be either fullscreen or of a smaller carousel size. By switching the actual size of the slideshow and removing the transforms when they are not needed anymore, we allow the slideshow to have a “real” size (i.e. 25% of the window). For the content part, we slide everything up and reveal a scrollable area.

Tags:

Leave a Reply