Responsive jQuery Slideshow with 3D CSS3 Transforms - Refine Slide

RefineSlide is a responsive and stunning jQuery plugin for creating a slideshow with a lot of cool 3D transform & CSS3 transition effects and thumbnails preview.

Included transform/transition Effects:

• Fade
• Random
• Slice horizontal
• Slice vertical
• Slide horizontal
• Slide vertical
• Scale
• Fan
• Block scale
• Kaleidoscope
• Blind horizontal
• Blind Vertical
• 3D Cube horizontal
• 3D Cube vertical

Basic Usage:

1. Include jQuery Refine Slide CSS and a theme CSS on the web page

<link rel="stylesheet" href="refineslide.css" />
<link rel="stylesheet" href="refineslide-theme-dark.css" />

2. Create the html

<ul class="demo">

<li class="group"> 
<a href="#"> <img src="1.jpg" alt="" /> </a>
<div class="rs-caption rs-bottom">
<h3>Caption Area 1</h3>
<p>Description 1</p>
</div>
</li>

<li class="group"> 
<a href="#"> <img src="2.jpg" alt="" /> </a>
<div class="rs-caption rs-bottom">
<h3>Caption Area 2</h3>
<p>Description 2</p>
</div>
</li>

<li class="group"> 
<a href="#"> <img src="3.jpg" alt="" /> </a>
<div class="rs-caption rs-bottom">
<h3>Caption Area 3</h3>
<p>Description 3</p>
</div>
</li>

</ul>

3. Include jQuery library and jQuery Refine Slide on the web page

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="jquery.refineslide.js"></script> 

4. Call the plugin with options

<script>
$(function () {
$('.demo').refineSlide({
maxWidth: 850 // set to native image width (px)
});
});
</script>

5. More options

maxWidth              : 800,      // Max slider width - should be set to image width
transition            : 'cubeV',  // String (default 'cubeV'): Transition type ('custom', random', 'cubeH', 'cubeV', 'fade', 'sliceH', 'sliceV', 'slideH', 'slideV', 'scale', 'blockScale', 'kaleidoscope', 'fan', 'blindH', 'blindV')
fallback3d            : 'sliceV', // String (default 'sliceV'): Fallback for browsers that support transitions, but not 3d transforms (only used if primary transition makes use of 3d-transforms)
customTransitions     : [],       // Arr (Custom transitions wrapper)
perspective           : 1000,     // Perspective (used for 3d transforms)
useThumbs             : true,     // Bool (default true): Navigation type thumbnails
useArrows             : false,    // Bool (default false): Navigation type previous and next arrows
thumbMargin           : 3,        // Int (default 3): Percentage width of thumb margin
autoPlay              : false,    // Int (default false): Auto-cycle slider
delay                 : 5000,     // Int (default 5000) Time between slides in ms
transitionDuration    : 800,      // Int (default 800): Transition length in ms
startSlide            : 0,        // Int (default 0): First slide
keyNav                : true,     // Bool (default true): Use left/right arrow keys to switch slide
captionWidth          : 50,       // Int (default 50): Percentage of slide taken by caption
arrowTemplate         : '<div class="rs-arrows"><a href="#" class="rs-prev"></a><a href="#" class="rs-next"></a></div>', // String: The markup used for arrow controls (if arrows are used). Must use classes '.rs-next' & '.rs-prev'
onInit                : function () {}, // Func: User-defined, fires with slider initialisation
onChange              : function () {}, // Func: User-defined, fires with transition start
afterChange           : function () {}  // Func: User-defined, fires after transition end

---

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