From our sponsor: Get suggestions for improving your content, targeting, and marketing automations to help you increase revenue.
StackSlider is a highly experimental jQuery image slider plugin that explores a different and fun viewing concept for thumbnails, utilizing CSS 3D transforms and perspective. The idea is to navigate through two piles of images where the transition resembles an item being lifted off from the top of the stack and moved/rotated to the center of the container to be viewed. The previously viewed image falls on the opposite stack.
The demo features illustrations by Isaac Montemayor. See his works on Dribbble or on his website.
Please note that this is highly experimental and not fully tested. And obviously the 3D effect just works in supporting browsers. The fallback is simply showing and hiding the images when navigating. The effect looks smoothest in WebKit browsers.
For using the plugin, an unordered list with the following structure is needed:
<ul id="st-stack" class="st-stack-raw"> <li> <div class="st-item"> <a href="http://drbl.in/fgQV"> <img src="images/1.jpg" /> </a> </div> <div class="st-title"> <h2>Graverobber</h2><h3>by Isaac Montemayor</h3> </div> </li> <li> <!-- ... --> </li> <li> <!-- ... --> </li> <li> <!-- ... --> </li> <!-- ... --> </ul>
The class “st-stack-raw” is only being used to hide the list when JS is enabled. It can be used to style the list for a no JS fallback.
The plugin can be called like this:
$( '#st-stack' ).stackslider();
A new structure will be generated, containing the list with items, the two stacks, the title container and a navigation.
The following default options are available:
// default transition speed speed : 700, // default transition easing easing : 'ease-in-out', // render both piles piles : true
The styles are defined in the style.css file and we use media queries to adjust the size of the thumbnails and the positioning of the title and navigation. If you’d like to try it out, make sure to change the media queries to fit your container and image size.
Looks best in IE10
Absolute fantastic concept.
Why is there always 2 images in stack?
I just didn’t want to leave it empty, looks nicer like that. But that can be easily changed (set the height of the stack to 0 in the stylesheet) 🙂 Cheers
Maybe one thicker image like a cover will be better and less confusing.
Pretty Cool !
Great idea and…just awesome
Thanks for the link love. Very nice slider, and quite responsive!
It’s an honor! Great illustrations! Cheers
This is great and awesome!!! Thank you!
Awesome! I love it !
Thanks for sharing.
Pedro, all Your script are the best!
Thanks, nice work!
Great share man! thumbs up for this (Y)
This is a nice nice effect. It works really well on touch screen. Is there a reason why there is a warning saying it works best in WebKit? It seems like it doesn’t need to be there. It works fine in IE10 and Firefox. The only place where it doesn’t work as well is Opera due to lack of 3D Transforms, but it degrades there nicely too. In some ways it actually works best in IE10 as you can use it with touch, like you would on a tablet.
Great script, but having problems integrating it into my web page, the navigation isn’t working
oh no worries, already fixed it. It was a z-index problem really. My page’s navigation had a high z-index for its position was fixed, and I had slideshows and other plugins on the page. The stackslider refused to work until I gave it the same z-index value as of my navigation.
How to enable autoplay?
Awesome Work 🙂
how to make it auto start and loop when finished, nice work
I have a problem. My images are not visible, they remain at the top of the screen. How can I resolve this?
It’s great work thank you very much. Can it has autostart options 🙂
Thanks for sharing! Just submitted a pull request to support looping https://github.com/codrops/StackSlider/pull/5