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!
Ideas for Subtle Hover Effects
This is Great!
Is there a way to control the slider with the mouse wheel?
Hello,
I want to implement the slider-switch throughout the page therefore if I am in the content page, I can click the slider and it will transfer me right up to the carousel section of the page. How would I do that ?
// down key
case 40:
// if not fullscreen don’t reveal the content. If you want to navigate directly to the content then remove this check.
//if( !self.isFullscreen ) return;
in dragslideshow.js, it allow you to go from “img-dragger-small”(the carousel) to “content-page” by pressing key down arrow, and back to carousel by key up.
you have to add “//” before “if( !self…”
i’m not developer.
better than nothing.
How to display slider first instead of details content ?
Amazing work!
Any option for auto rotate?
Hi.
Nice work.
What do i need to change if i want the carousel to be the default view when reloading page instead of fullscreen?
Thank you
I loved the post.
Jean Rodrigues, Apaixonado por Tecnologia e profissional na área de Corte PS, São Paulo – SP
hi nice work
content-switch position settings? please
saple : margin top = 100px, margin bottom= -100 px
thanks.
I love this!