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 sponsor: Elementor, a design oriented WordPress website builder for pros












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!

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

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.
  1. First off, what a great slider, it’s really great.

    I have a few problems:

    1. It crashes on iPad (Mini Retina) in multiple browsers (Chrome and Safari), while it works on iPhone (5) and I don’t know how to fix this.

    2. I have the slider in an iframe because I wanted to have my own navigation menu above it. This causes double vertical scrollbars, I fixed this by setting body{ overflow-y: hidden;} which works fine on OS X in Chrome and Firefox but I can’t scroll at all in Safari.

    Anyone has solutions for this?

    *I haven’t tested it on Windows or Android yet.

    • Hi I got the same issue on iPad, always crash on the first slide, have you got any clue so far? Thanks,

  2. Hi, great demo Mary Lou!
    I just trying to understand if is it possible to associate the click of the scroll-down to show the contents with the opening of a new page, but keeping that beautiful effect. Make seo-friendly this demo 🙂

    Someone think is possible?

  3. sorry for past comment, i want to add more than one button content-show in same slide?

  4. Nice job!

    But the slider has a problem, when lenght slider has a one slide. Then .js remove ‘current’ class and nothing more. You must modified dragslideshow.js function call
    ‘DragSlideshow.prototype._navigate = function( x, y ) {‘

    and add
    ‘if( this.slides.length > 1 ) {‘
    then rest of function body.

    Do it next version!

  5. Hello everyone,

    First, Thanks to Mary Lou for this awesome plugin !!!

    BUT I have an issue with this plugin 🙁
    I’m using some javascript to fire animation (with waypoints), to scroll top or to start parallax.
    Those scripts work fine on all page except on my slideshow page.

    I’m developing with Firebug to check javascript errors, but there are nothing.
    I think there is maybe a conflict with jquery (because slideshow doenst use it).

    So I made some test and something is really weird.
    With modernizr when you load a page, it adds some html classes (like js csstransition).
    If I delete those classes my waypoint script works !
    If I delete slideshow function, my waypoint script works too.
    But I can’t get both working ….

    I did another test by using downloaded folder from this tutoriel. I added some scripts and I have the same issue.
    Only slideshow seems fireing.

    Any idea ? 🙁

  6. Fantastic work!

    Do you have any idea why is not working the drag event on IE for Surface?

  7. Hello,
    great tutorial and you were very nice to share it with us.
    I’m not a developer so It’s not so easy for me customize the slideshow.

    I’m starting with a simple question: how is it possible to stop the slideshow and then add a button to start the slideshow again?
    Thanks!
    Andrea

  8. Hi, i’m having a problem that i can’t fix.
    I wanted to put some arrows for navigation and i id the images and when you hit the arrow it really change but it don’t assume the data content in the page. It show the backrgound with no text..

    Can anyone help me ?

    Thanks, and great job with the design 🙂
    P.S: Sorry for the bad english

  9. Hi,

    first of all, great and awesome code!

    If i want change animation passing from a slide to the next how can i do this? there are some options? how can i manipulate plugin for do that?

    Thanks in advance for tips!

  10. With pictures of different widths, it would be good to see the nearby images.
    anyway to string them together into one long, drag able, full-size banner?

  11. Hi, first off this is a really nice slider and I’m glad I found this. I added my own slides – 22 with respective content – and found that 12 slides seems to be the magic threshold for the whole thing to sort of crash – sliding will not work anymore, the switch icon will disapear, the current slide has no highlighted title and content cannot be accessed via keyboard anymore. Any idea why this happens and what I’d have to do to fix this? thanks, Axel

    ps: Oh, and is there a way to lose the overlay with the icons that explain how the whole thing works? I tried to get rid of it in the css and the whole design fell to pieces: no slides, all text collapsing at the left side of the screen…

  12. I just wanted to drop by; long time lurker, first time commenter. What a beautiful slider; it feels like so much more than just a slider, though. I love it- great job and thanks for sharing!

  13. Good job, you are very helpful with yours ideas.
    Is there any way to click other element than button at slider? I mean i can’t use hover effect for h2, or put a div which would do this properly. I would like to use this slider as background 🙂