Draggable Dual-View Slideshow

An experimental slideshow that is draggable and has two views: fullscreen and small carousel. In fullscreen view, a related content area can be viewed.
By in Playground on
DRaggableDualViewSlideshow
View demo Download Source

From our sponsor: Wix’s robust, secure platform lets you develop faster and deliver smarter.












DRaggableDualViewSlideshow

Today we’d like to share an experimental slideshow with you. The idea is based on the great navigation concept from the Wild website where one can view the projects in either fullscreen or in a carousel mode. 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.

Please note that this slideshow is highly experimental and only works properly in modern browsers.

The images used in the demo are from Unsplash.com.

When the slideshow is loaded, we show some info initially, that shows which interaction possibilities exist:
DraggableFullscreenSlideshow00

The main view of the slideshow is the fullscreen one. This is the only view shown for mobile:
DraggableFullscreenSlideshow01

When clicking on the arrow button, the content will be revealed in a sliding transition:
DraggableFullscreenSlideshow03

When clicking on the button for the view switch, the slideshow will be “zoomed out” to a smaller version:
DraggableFullscreenSlideshow02

Please note that at the time of release, Firefox (30.0, Mac & Windows) was the worst performing browser with issues around using 3D transforms, animations and transitions. Although we tried to fix all issues, some effects might not work properly.

We hope you enjoy this experiment and find it inspiring!

Find this project on Github

Tagged with:

Mary Lou

ML 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.

http://www.codrops.com

ParallaxSliderHoverReveal_featured

Crafting a Scrollable and Draggable Parallax Slider

FoldingDOM_featured

3D Folding Layout Technique for HTML Elements

Triangles_Featured

Experimental Triangle Image Transitions with WebGL

Stay up to date with the latest web design and development news and relevant updates from Codrops.

CSS Reference

Learn about all important CSS properties from the basics with our extensive and easy-to-read CSS Reference.

It doesn't matter if you are a beginner or intermediate, start learning CSS now.

Feedback 111

Comments are closed.

  2. Hello,

    I want to implement the slider-switch throughout the page therefore if I am in the content page, I can click the slider and it will transfer me right up to the carousel section of the page. How would I do that ?

    • // down key
      case 40:
      // if not fullscreen don’t reveal the content. If you want to navigate directly to the content then remove this check.
      //if( !self.isFullscreen ) return;

      in dragslideshow.js, it allow you to go from “img-dragger-small”(the carousel) to “content-page” by pressing key down arrow, and back to carousel by key up.
      you have to add “//” before “if( !self…”
      i’m not developer.
      better than nothing.

  5. Hi.
    Nice work.
    What do i need to change if i want the carousel to be the default view when reloading page instead of fullscreen?
    Thank you

  6. I loved the post.
    Jean Rodrigues, Apaixonado por Tecnologia e profissional na área de Corte PS, São Paulo – SP

  7. hi nice work

    content-switch position settings? please

    saple : margin top = 100px, margin bottom= -100 px

    thanks.