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: Market smarter with Mailchimp's automated messaging tools.












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. Super cool – add a fixed header on top of the slideshow and you could have a really unique blog design. I think it’d be pretty cool if the header text on the hero image slid down & transitioned color into the content section.

  2. It always amazes me how much you are willing to give away freely! I can’t even tell you how much of my webucation is credited to Codrops

  3. Thanks Mary,
    You have been in the top five for years!
    and its time to say that this blog is leading the web design wave.

  4. How about using back and forward keys to navigate this? It feels like its own interface so much that I intuitively tried to.

  5. ……………………………………………………. i have no words to descrip u

  6. Very good, but I have to confess that my “instinct” made me try to roll the slides with the mouse scroller…

  7. Amazing as usual. It would be ideal for tablets. But, unfortunately, it crashes both mobile Chrome and Safari.

    • Never mind. My version seemed to be working but it looks like it still crashes on the iPad. Oddly enough, it doesn’t crash on my iPhone 5c.

    • @ Won – thx a lot for this alternate solution – i’ll prefer jQuery as it’s on my host doing things at all.
      It’s working fine, also on my Android 2.3-Droid! But one there specific hint is, that of the text area on the bottom of each slide only shown 2 lines and isn’t possible to be scroll down to see it all. Maybe it’s a outdated android problem.

  8. Nice! I’ve used this technique on my personal website in a simplified form (http://m.bazaczek.pl/). Good to see this example, looks and performs much better than my implmentation.

    There is one problem with this approach, tough – for non-heavy internet users, this kind of navigation is confusing, as I’ve found (on desktops). But for touch-enabled devices this is much more natural – but again, we are accustomed to this in native apps, not websites 🙁

    Anyway, codrops, always on the bleeding edge, thank you for this demo!

  9. Nice all in all. But the drag implementation doesn’t work at all on MS touch devices – the dragdealer library that you’re using doesn’t cater for any touch detection through pointerevents in IE.

  10. Mary Lou, if there was a Nobel prize for creative design and technology, I would nominate you. Are you married? (Asking for a friend.)

  11. Muito bom! Achei um máximo ter um slideshow de entrada e com um texto abaixo de cada um, só fiquei um pouco confuso na hora de usar as setas. Por exemplo, quando você aperta a seta para baixo e ele abre a parte de texto do slide, a seta para baixo e o scroll são usados para navegar pelo texto, mas somente o scroll dá uma navegabilidade boa, pois quando você aperta a seta para cima e ele volta para o slide não era o que eu esperava, esperava o mesmo comportamento do scroll. Fora isso está de parabéns!

  12. Fantastic!
    would be very nice if you wrote a more detailed tutorial on how you realized the project, in particular the view switches.

    PS: sorry for the bad English, I love you MARY LOU 😉 I love your projects.

  13. Very nice, i like the dual-view thing and same as Daniel Lemes i tried to scroll down with my mouse!