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.


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:

The main view of the slideshow is the fullscreen one. This is the only view shown for mobile:

When clicking on the arrow button, the content will be revealed in a sliding transition:

When clicking on the button for the view switch, the slideshow will be “zoomed out” to a smaller version:

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


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 95

  1. 2

    I’m adapting this design on my site band research project , but I have a problem because I turned off the divs which is inside the div handler.
    Example of problem:

    values deleted

    and am trying to pass the values ??deleted by a request jQuery.ajax, php database, this almost everything right my problem is that after he returns not insert the style tags within the and what I would do to solve this problem , can you help me ?

  2. 3

    Hi There,
    I love this framework you have built… Thank you.

    Is there a way to get rid of whatever seems to be “dulling” the graphics in the background?

    Your help would be much appreciated :)


    • 4

      you can easily solve that by editing componenet.css

      .img-wrap img {
      position: absolute;
      display: block;
      height: calc(100% + 0.2px);
      opacity: 100%;/* setting opacity to 0.5 is the one making that effect */

  3. 6

    Hey, nice work here! There is a way to remove the “intro” [read: overlay class] to display directly the first item?
    Thank you. :)

  4. 7

    Hello, I am currently using and adapting this style to create my online portfolio. I have 2 questions ;

    – I was wondering how do link separate webpages together? at the very least create individual hyper links for each slide

    – Is there anyway to add the direction transition to every aspect of the page ?

    Any help will definately be appreciated

    Thank you

    • 8

      Hello, thank you Mary Lou for this awesome project and for all of the others you post. I am a Codrops regular. That said has anyone figured out how to add links to the each slide?
      Is this close?
      window.history.replaceState(‘Object’, ‘Title’, ‘/4000/title-2′);

  5. 10

    i really thank for you but i have 1 question.
    i wanna use this with several articles ~ then, i wanna make each article (content) has 1 html page.
    (because each article content is too long!)
    i’m not ENG-user so i have terrible language… but i really wanna use this tip… T.T could you help me?

  6. 13

    Scrolling is not working with chrome updated version, Version 44.0.2383.0 ,
    I fix it by replacing the code on dragslideshow.js line 222
    return this.pages.querySelector( ‘div.content[data-content = “‘ + slide.getAttribute( ‘data-content’ ) + ‘”]’ );
    with this one
    return this.pages.querySelector(“div.content[data-content= ‘” + slide.getAttribute( ‘data-content’ ) + “‘]”);

  7. 14

    I love this layout. There seems to be a minor glitch. Has anyone experienced that once you vertically scroll into one of the articles, either by using the arrow or clicking the read more button, the mouse scroll no longer works in Chrome? Can’t scroll the articles content. I know this code is “as is” but has anyone fixed this bug?

  8. 16

    Same problem – dont work scroll in Chrome. Ho can help to solve this bug for for payment?

  9. 17


    thank you Mary Lou for this great demo!

    I hope someone can fix the issue with the scrolling in Chrome, so that we can use this great work…

  10. 18

    I can not increase the amount of slides as the “content-switch” for work. Can anyone help me?

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=""> <s> <strike> <strong>