#Skidder

A flexible jQuery slideshow plug-in that supports centering, swiping and responsive scaling.

##Features

• optional paging
• optional cycling
• optional centering
• optional image scaling, also on resize
• iOS-like swiping on touch devices
• works with: Chrome, Firefox, Safari, IE8+ ...

##Usage

###Setup

<link rel="stylesheet" href="../src/jquery.skidder.css">
...
<div class="slideshow" style="display: none;">
  <div class="slide"><img src="1.jpg"></div>
  <div class="slide"><img src="2.jpg"></div>
  <div class="slide"><img src="3.jpg"></div>
</div>
...
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="../src/jquery.skidder.js"></script>
<script>
  $('.slideshow').skidder();
</script>

The slide divs can take an optional data-href attribute for links on mobile.

Make sure that images are loaded before initialising the plug-in, or the slideshow might not get sized correctly. You can use imagesloaded.js for this purpose - load it, then call like this:

$('.slideshow').each( function() {
  var $slideshow = $(this);
  $slideshow.imagesLoaded( function() {
    $slideshow.skidder();
  });
});

All controls are hidden for slideshows with only one image, but Skidder will still scale the image properly.

###Resizing

Bind this call to your resize, orientationchange, whatever event:

$('.slideshow').skidder('resize');

It is highly recommended to debounce this to save some trees, e.g. with Paul Irish's smartresize, which you can use like this:

  $(window).smartresize(function(){
    $('.slideshow').skidder('resize');
  });

###Transitions

Skidder supports two modes of animating the slide transition ("animationType" option): CSS and jQuery animate. Using CSS mode is recommended for performance reasons. CSS obviously requires that the browser support CSS transitions, if not, Skidder will switch to 'animate' mode. Both modes require requestAnimationFrame, which is polyfilled for older browsers.

Skidder offers two types of transitions ("transition" option): slide and fade. Fade always animates using CSS. Regardless of the transition selected, touch devices will always use the 'slide' transition, unless swiping is set to false. Note that for now the fade transition requires images of equal size.

###Viewport and Scaling

Skidder has a number of options to deal with various image sizes, desired viewport layout, and responsivness:

• 'scaleSlides' determines if slides are displayed as they are (styled only via css), or if the are scaled programmatically (via inline css properties) to fit certain dimensions. If you just need a simple slideshow with equally sized images you can turn off scaling altogether and handle responsiveness via css if needed. If you have to deal with various image formats or mix image- and non-image slides, scaling will help you out. It uses the following options:
• 'scaleTo' can be either "smallest", or an array consisting of two numbers [x, y]. "smallest" will scale all your images to the height of your smallest (ie. least tall) image, as well as set the slideshow's height accordingly. Take note that adding one 5px tall image to a slideshow will render the entire slideshow 5px tall. an array of two numbers (e.g. [16, 9]) will determine the aspect ratio of the slide show, ie. its height relative to its given width. images will be scaled to fill the viewport, ie. for wider images left and right edges will be hidden, top and bottom edges for taller images.
• there are times when you need to keep the bottom and top edges of tall images. that's what "preservePortrait' is for: if set, any image less wide than the specified ration will be sized to fit.
• 'maxWidth' and 'maxHeight' are here to limit the dimension of the slide show. If set to "none" or 0, no limitation is applied in that direction.

Scaling always manipulates the first image in the slide element. If you want to include more images in a slide (for overlays etc), make sure to place them after the primary image tag.

If you are using image-less divs without scaling, you will have to set the height of the slides with css, or

###Lazy Loading

###Styling

Default styles are included in jquery.skidder.css - change at will. For non-scaling non-image slides (i.e. slides without an explicit img tag), make sure they have initial dimensions, e.g. through provided width and height css properties. For scaling non-image slides set intiSlideWidth and intiSlideheight instead.

###Options

##Roadmap

• lazy loading
• outerPaging option (find paging element in next sibling element to slideshow)
• use requestAnimationFrame or optional pure css transitions to improve performance
• test and debug leftalign (align to viewport or maxSlideWidth?)/ non-cycle (disable event handlers for first and last slide) / jumpback options
• adapt swipehandler to nocycle
• make click cancel autoplay
• DRY click/swipe/autoplay events
• fold (optional) smartresize into skidder
• proper swiping
• better bottom-align paging
• adapt speed to slide width
• disable controls, paging and autoplay for less than 2 images
• callback functions
• stepsize option for larger jumps (best responsive)
• option for custom easing functions
• allow to move multiple slides in one swipe
• <=IE9 does not support CSS transitions: css mode should fall back to animate for these browsers
• polyfill rAF
• test with scaling no-image slides that contain a not-scaling image, possibly:

| noScaleClass | Set this on images contained within the slide div that you don't want to be scaled. Please include leading ".". Default: ".skidder-no-scale" |

###Limitations

• at the moment it's not possible to mix img and non-img slides
• slides containing image tags other than the background image will break scaling
• fade transition requires images of equal size (TODO: rewrite center function)

##Credits and license

###Author Georg Lauteren for null2 georg.null2.net twitter.com/_gl03 requestAnimationFrame polyfill by Erik Möller. fixes from Paul Irish and Tino Zijdel

###License Licensed under the MIT License

###Sites that use Skidder

• http://null2.net
• http://www.wildbunch-germany.de
• http://b2b.berlinale.de
• http://dummy-magazin.de