in Playground

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

From our monthly sponsor: HelloSign API: Everything IT wants and developers love. Try it free today.












DRaggableDualViewSlideshow

View demo Download source

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

View demo Download source

Previous:
Next:

Tagged with:

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.

View all contributions by

Website: http://www.codrops.com

Related Articles

GlitchSlideshow_featured

Glitch Effect Slideshow

RevealSlideshow_featured

Triple Panel Reveal Slideshow

MotionTransition_featured

Motion Transition Effect

Receive our bi-weekly Collective or official newsletter right in your inbox.

Which newsletter would you like to receive?

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

    • 3

      // 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. 6

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

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

  7. 8

    hi nice work

    content-switch position settings? please

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

    thanks.

Comments are closed.