Multifunctional Image Carousel Slider Plugin For jQuery - Slidon

Slidon.js is a simple yet full-featured jQuery slider carousel plugin which scrolls through a group of images with tons of configuration options and API.

Key features:

• Allows any number of items shown on slider.
• Vertical or horizontal scrolling.
• Custom scroll directions: top, right, left and bottom.
• Carousel or slider mode.
• Scrolling thumbnail navigation.
• Auto rotation.
• Lots of easing effects based on jQuery UI.
• Custom scroll animations.
• Lots of callbacks and methods.

Basic usage:

1. The plugin requires jQuery and jQuery UI libraries loaded correctly in the document.

<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/jquery-ui.min.js"></script>

2. Load the minified version of jQuery Slidon.js after jQuery library.

<script src="jquery.slidon.min.js"></script>

3. Wrap the images you want to present in a DIV container as follows:

<div id="demo" class="slidon">
  <img src="1.jpg">
  <img src="2.jpg">
  <img src="3.jpg">
  ...
</div>

4. Call the function on the top container to generate a basic image carousel.

$("#demo").slidon({
  // optional settings here
});

5. Plugin's default settings.

$("#demo").slidon({

  // number of items on slider
  display: 1,

  // number of items per one slide
  iter: 1,

  // animation speed in milliseconds
  speed: 1000,

  // 'horizontal' or 'vertical'
  type: 'horizontal',

  // 'right' and 'left' for 'horizontal'
  // 'top' or 'down' for 'vertical'
  direction: 'right',

  // enable carousel mode
  carousel: true,

  // jQuery easing effects
  // 'random' = random effects
  effect: 'dynamic',

  // specify the element index
  index: 1,

  // slide through all items up to the selected one or do you want to instantly index it
  instantIndex: false,

  // auto scroll options
  autoScroll: {
    time: 2000,
    bounce: false,
    pause: false
  },

  // thumbnail navigation options
  scroller: {
    type: 'horizontal',
    position: 'bottom center',
    hidden: false,
    hideSpeed: 300,
    proportion: false
  }

});

6. Callbacks.

$("#demo").slidon({

  callbacks: {

    // BEFORE Slidon iterates to the left.
    "left" :null, 

    // AFTER Slidon iterates to the left.
    "leftComplete" : null,

    // BEFORE Slidon iterates to the right.
    "right" : null, 

    // AFTER Slidon iterates to the left.
    "rightComplete" : null, 

    // BEFORE Slidon iterates upwards.
    "up" : null, 

    // AFTER Slidon iterates upwards.
    "upComplete" : null, 
    
    // BEFORE Slidon iterates downwards.
    "down" : null, 

    // AFTER Slidon iterates downwards.
    "downComplete" : null, 

    // BEFORE Slidon elements are shuffled.
    "shuffle" : null, 

    // AFTER Slidon elements are shuffled.
    "shuffleComplete" : null, 

    // when Auto Scroller is started.
    "start" : null, 

    // AFTER Auto Scroller started.
    "startComplete" : null, 

    // when the Auto Scroller is stopped.
    "stop" : null, 

    // when the Auto Scroller is stopped.
    "stopComplete" : null, 

    // BEFORE the Slidon direction is switched.
    "invert" : null, 

    // AFTER the Slidon direction is switched.
    "invertComplete" : null, 

    // BEFORE the Slidon indexes a specific element on it, either by user interaction over scroller or by code.
    "index" : null, 

    // AFTER the Slidon element indexing finished.
    "indexComplete" : null, 

    // When mouse pointer goes inside the Slidon. 
    // On this only callback, the caller parameter actually tells you over which component of the Slidon mouse pointer is over, either "scroller" or "slidon". 
    "mouseIn" : null, 

    // when mouse pointer goes outside of the Slidon. 
    "mouseOut" : null, 

    // BEFORE the Slidon Scrolling Box ( if it's currently visible ) is hidden.
    "hide" : null, 

    // AFTER the Slidon Scrolling Box is hidden.
    "hideComplete" : null, 

    // BEFORE the Slidon Scrolling Box ( if it's currently hidden ) is shown.
    "show" : null, 

    // AFTER the Slidon Scrolling Box is shown.
    "showComplete" : null, 
    
  }

});

7. API methods.

.slidon("show", 1000)
.slidon("pause", 2000)
.slidon("effect", "easeInQuint")
.slidon("index", 7, 2000)
.slidon("pause", 1000)
.slidon("effect", "easeOutCubic")
.slidon("next", 3000)
.slidon("effect", "easeInOutElastic")
.slidon("prev", 2000)
.slidon("hide", 1000)
.slidon("effect", "easeInSine")
.slidon("index", 6, 2000)
.slidon("show", 1000)
.slidon("effect", "easeInOutBounce")
.slidon("index", 1, 3000)
.slidon("hide", 2000);

---

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