Auto Scalable Responsive Image Carousel Plugin For jQuery - skidder

skidder is a jQuery slider plugin for creating a responsive, mobile-friendly image carousel that features auto image scaling to fit mobile & desktop browsers.

More features:

• Supports all modern browsers.
• Swipe to scroll.
• Auto resizes images with different heights.
• auto play, infinite looping, etc...

Basic Usage:

1. Include the jQuery skidder plugin's CSS file in the header.

<link rel="stylesheet" href="src/jquery.skidder.css">

2. Include jQuery library and the jQuery skidder plugin's javascript file at the end of the page.

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

3. Include the other jQuery plugins for better experiences.

<script src="lib/imagesloaded.js"></script>
<script src="lib/smartresize.js"></script>

4. Wrap the images in the DIV elements.

<div class="slideshow" style="height: 0; overflow: hidden">
<div class="slide"><img src="./images/1000x400_b.png"></div>
<div class="slide"><img src="./images/300x500_p.png"></div>
<div class="slide"><img src="./images/500x300_y.png"></div>
...
</div>

5. Call the plugin with all the default configs.

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

  // Class of the slide element. 
  slideClass: '.slide',
  imageClass: "",

  // 'animate' or 'css'
  animationType   : 'css',

  // Scales widest image to maxSlideWidth.
  // Adjusts slideshow height accordingly. 
  scaleSlides   : true,

  // enable lazy load
  lazyLoad: false,
  lazyLoadAutoInit: true,
  lazyLoadWindow  : 1,

  // Scales slides (via css) to uniform values, depending on maxWidth, maxHeight, and scaleTo settings 
  scaleSlides     : true,

  // Scale widest image to this width if scaleSlides == true
  maxWidth : 800,
  maxHeight: 500,

  // Defines the scaling mode of scaleSlides. 
  // At the moments there are two modes: Scale to smallest, and ratio (responsive) mode. 
  // "smallest" - height of the least tall image determines height of slideshow. 
  // [x, y] – an array of two number defining a ratio for the slide show.
  scaleTo: "smallest", 

  // Only for ratio mode: Determines wether images that are less wide than the current ratio will fill the viewport, having their top and bottom cropped ("false"), or fit the viewport, leaving room to the sides ("true").
  preservePortrait: false,
  spaceSlides     : false,
  noScaleClass    : ".skidder-no-scale", 

  // Creates a clickable and stylable paging dot for each slide.
  paging: true,
  pagingWrapper : ".skidder-pager",
  pagingElement : ".skidder-pager-dot",

  // Enable swiping on touch device.
  swiping   : true,

  // Set to true if you don't want your slideshow centered.
  leftaligned   : false,

  // Set to false if you don't want your slideshow to wrap around
  cycle : true,

  // In non-cycling mode jumpback will display a 'return to first slide' arrow at the last slide.
  jumpback  : false,

  // Transition speed.
  speed : 400,

  // Enable autoplay
  autoplay  : false,

  // Resume autoplay after paging has been clicked
  autoplayResume: false,

  // autoplay interval
  interval  : 4000,

  // Choose between 'slide' or 'fade'
  transition: "slide",

  // Adds classes 'left-from-active' and 'right-from-active' to slides after transition is complete. 
  // useful for triggering e.g css transitions on particular slide elements. 
  // costs a little performance so leave inactive if not needed. 
  directionClasses: false,

  // Callbacks
  afterSliding    : function() {},
  afterInit       : function() {},
  afterResize     : function(instance) {},
  afterLazyLoad   : function() {}
});
});
});

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

Change logs:

2016-05-19

• v0.2.93: JS update

2015-12-17

• v0.2.9: lazy-loading; remove console log

2015-11-20

• v0.2.8: rewrite of CSS timing using transitionend and rAF

2015-05-05

• v0.2.2 final

2015-01-23

• Bugs fix.

2015-01-21

• Add autoplayResume funtion

2014-12-18

• Add callback function

2014-04-01

• fix touch link touch issue

---

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