3D Image Slider - StackSlider

File Size: 317 KB
Views Total: 6229
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
3D Image Slider - StackSlider

StackSlider is a fun jQuery image slider plugin. By using CSS 3D transforms and perspective, this plugin explores a different and fun viewing concept for thumbnails.

Tip: to see a continuous flow, keep your mouse pressed on the navigation arrows.

Basic Usage:

1. Include jQuery Library and stackslider.js

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.stackslider.js"></script>

2. Html

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

3. Call the plugin

$( '#st-stack' ).stackslider();

4. Options

// default transition speed
speed : 700,
 
// default transition easing
easing : 'ease-in-out',
 
// render both piles
piles : true

This awesome jQuery plugin is developed by codrops. For more Advanced Usages, please check the demo page or visit the official website.