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
Demo Code











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

Tiny break: 📬 Want to stay up to date with frontend and trends in web design? Subscribe and get our Collective newsletter twice a tweek.

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!

Manoela Ilic

Manoela is the main tinkerer at Codrops. With a background in coding and passion for all things design, she creates web experiments and keeps frontend professionals informed about the latest trends.

How to Create Distortion and Grain Effects on Scroll with Shaders in Three.js

Progressively Enhanced WebGL Lens Refraction

Getting Creative with Infinite Loop Scrolling

Stay in the loop: Get your dose of frontend twice a week

Fresh news, inspo, code demos, and UI animations—zero fluff, all quality. Make your Mondays and Thursdays creative!

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.

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

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

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

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

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

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

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

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

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

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

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

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

  24. Scrolling doesn’t always work in safari 7.0.3, and it crashes on iPad. Apart from that it’s great!

  26. Hi,
    Frist of all great job!
    I’m searching for a way to add links from the frist slide to the third slide for example.

    • i had some solution. Firstly you must add “id” your slides. For example;

      and you must add links or buttons.

      Slide 7

      that’s all 🙂

    • I had the same issue. I wasn’t sure what was causing it either, but I noticed that when I replaced classie.js with jQuery the problem disappeared.

    • How do you replace the classie.js with jquery? Can you explain it better, I don’t get it.

    • Can maybe someone help me with this, i have the same problem.
      Won, maybe you can share your code? much appreciated!!!

  28. Very nice!

    Same problem as Massimo though – it seems to crash whenever opened on an ipad.

    • Probably several ways to do this, but I did it by adding the menu setup in init in dragslideshow.js line 263. Right after
      DragSlideshow.prototype._initDragDealer = function() { var self = this; this.dd = new Dragdealer( this.imgDragger, { steps: this.slidesCount, speed: 0.4, loose: true, requestAnimationFrame : true, callback: function( x, y ) { self._navigate( x, y ); } }); var gotoSlide = 1; var slidesObject = this.dd; $(".mapHolder .menu a").on('click', function(e) { e.preventDefault(); gotoSlide = $(this).attr("data-x"); slidesObject.setStep(gotoSlide); }); }

      with markup (you probably don’t need mapholder span…I’m using that for a gui):
      <span class="mapHolder"><span class="menu"><a class="" data-x="1" href="#">1</a><a class="" data-x="2" href="#">2</a><a class="" data-x="3" href="#">3</a></span></span>

    • Thank you so much Ryan!

      DragSlideshow.prototype._initDragDealer = function() {
      var self = this;
      this.dd = new Dragdealer( this.imgDragger, {
      steps: this.slidesCount,
      speed: 0.4,
      loose: true,
      requestAnimationFrame : true,
      callback: function( x, y ) {
      self._navigate( x, y );
      }
      });

      }
      DragSlideshow.prototype._initDragDealer = function() {
      var self = this;
      this.dd = new Dragdealer( this.imgDragger, {
      steps: this.slidesCount,
      speed: 0.4,
      loose: true,
      requestAnimationFrame : true,
      callback: function( x, y ) {
      self._navigate( x, y );
      }
      });
      var gotoSlide = 1;
      var slidesObject = this.dd;
      $(“.mapHolder .menu a”).on(‘click’, function(e) {
      e.preventDefault();
      gotoSlide = $(this).attr(“data-x”);
      slidesObject.setStep(gotoSlide);
      });
      }

  33. Though this slider is not suitable to our regular clients, the slideshow is cool and gives me more scope to experiment for something good.

  34. Amazing website, i was testing it on smartphone and when i click the “more” button and go to the content, the button get bugged and can’t go back to the mainpage. Any idea of how to fix that? i wanted to use a similar button style for my website.

  36. Can we set another slide to be the first one which loads with the page? If I want to display the last slide after page load, and the user has to slide to the left and not right if he wants to view the other slides, is that possible?

  37. Richard,

    Look in the dragdealer.js file and modify/add the necessary attributes in dragslideshow.js. In your case, you’d want to set “x” to “1”.

  40. It would be so nice to have the source files of this post updated so the classie.js will not make the ipad crash.
    I would love to implement this on my ipad projects but I know nothing about js so I can’t manage to fix it myself.

    all the best,
    Fábio.

    • hi Fabio or someone?,

      any change that you have an updated version with a new classie.js?
      I want to use this nice template, but the ipad-crashing is holding me.

      thanks in advance

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

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

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

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

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

  48. Fantastic work!

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