Skidder jQuery slideshow pugin

Download   Demo

Skidder is a jQuery slideshow pugin 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+ …

1. INCLUDE CSS AND JS FILES

<link rel="stylesheet" href="../src/jquery.skidder.css"> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="../src/jquery.skidder.js"></script>

2.  HTML

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

3. JAVASCRIPT

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

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();
  });
});

Sliding contriols are disabled for slideshows with less than two images.

4. OPTIONS

Option	Description
slideClass	Default: ‘.slide’
scaleImages	Scales widest image to maxSlideWidth. Adjusts slideshow height accordingly. Requires images! Default: false
maxSlideWidth	Scale widest image to this width if scaleImages == true. Default: 800
paging	Creates a clickable and stylable paging dot for each slide. Default: true
swiping	Enable swiping on touch device. Default: true
leftaligned	Set to true if you don’t want your slideshow centered. (true = buggy!) Default: false
cycle	Set to false if you don’t want your slideshow to wrap around (false = buggy!).Default: true
jumpback	In non-cycling mode jumpback will display a ‘return to first slide’ arrow at the last slide. Default: false
speed	Transition speed. Default: 400
autoplay	_Default: false
interval	Autoplay interval _Default: 4000
afterSliding	Define if you need a callback function

5. RESIZING

$(‘.slideshow’).skidder(‘resize’);

You will want to debounce this to save some trees