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

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!

View demo Download source

Previous:
Next:

Tagged with:

Mary Lou (Manoela Ilic) 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://tympanus.net/

Related Articles

Feedback 53

  1. 4

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

  2. 6

    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.

    • 7

      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 :)

    • 9

      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.

    • 10

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

    • 11

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

  3. 12

    Very nice!

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

    • 14

      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>

    • 15

      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);
      });
      }

  4. 19

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

  5. 20

    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.

  6. 22

    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?

  7. 23

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

  8. 26

    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.

    • 27

      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

Follow this discussion

Leave a Comment

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>