RefineSlide is a simple jQuery plugin for displaying responsive, image-based content (with shiny animations).

  • What’s this all about then?

    RefineSlide is a simple jQuery plugin for displaying responsive, image-based content (with shiny animations). CSS transitions are used wherever possible, which currently makes for varied performance across browsers and platforms.

  • Future plans

    • A ground-up, touch-supporting, jQuery-less rewrite is in the works.
    • Features

      • A few transitions to play with
      • Responsive down to mobile scale
      • CSS transition & 3D transform support
      • Javascript fallback fade transition
      • Auto-formatted, responsive thumbnails
      • Good browser support (IE7+)
      • HTML captions
      • Hardware acceleration on supported browsers
      • Free to use and abuse as you like
      • Simple, semantic markup
      • Lightweight: ~10.7k minified

New code updates for responsive websites
Most website designers use slideshows on the homepage while designing a website. One of the most advantages of jquery sliders for website designers is that they can achieve “flash-like” effects without using flash. Flash does not play on many devices by default including iPhone and iPad. Here is an update to the original code to make it responsive compatible. To view a demo of responsive sliders you can take a look at the responsive website design projects by Long beach web design team who has utilized many 3D slideshows on their recent responsive web design projects.
Here is the detailed updated code:

<script src=""></script>
<script src="jquery.refineslide.js"></script>

Once you create the Html you should include jQuery library and jQuery Refine Slide on the web page

$(function () {
//these are options and can be removed if not needed//
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): <a href="">Navigation</a> 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
//end of options//

Call the plugin and add options (remove or comment out the options if you do not need them). Credit for the responsive compatibility snipet goes to Dana W.

Leave a comment