Generic Slider / Carousel Plugin with jQuery - Short Slider

Short Slider is a lightweight, multi-functional jQuery plugin that makes it easy to generate a slider / carousel from a list of html content.

Features:

• Lightweight and easy to use. Without the need to write any additional CSS rules.
• Carousel mode.
• Slide or crossfade effects.
• Autoplay.
• Pause on hover.
• Responsive and touch friendly.
• Multiple instances on one page.
• Arrows navigation.
• Bullets pagination.

Basic usage:

1. Include jQuery JavaScript library and the jquery.shortslider.js script at the bottom of the html page.

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script> 
<script src="js/jquery.shortslider.js"></script>

2. Create a carousel slider from a list of images.

<div class="slide-demo">
  <ul>
    <li><img src="1.jpg" alt=""></li>
    <li><img src="2.jpg" alt=""></li>
    <li><img src="3.jpg" alt=""></li>
    <li><img src="4.jpg" alt=""></li>
    <li><img src="5.jpg" alt=""></li>
  </ul>
</div>

3. Initialize the plugin to create an image slider in the carousel fashion.

$('.slide-demo').shortslider({
  style : 'carousel'
});

4. All configuration options.

$('.slide-demo').shortslider({

  // css class for ul list
  itemDisplay   : '.itemDisplay',

  // nomal, carousel, fade
  style     : 'nomal',

  // animation speed
  movementSpeed : 500,

  // touch enabled 
  flick     : true,

  group     : 1,

  // random animations
  rand      : false,

  // pause on hover
  hoverStop   : true, 

  // animation speed
  speed     : 5000,

  // auto play
  auto      : true,

  // shows pagination bullets
  indicator   : true,
  indicatorStyle  : true, 

  // shows navigation arrows
  PrevNext    : true,
  PrevNextStyle : true 
  
});

Change log:

2016-02-10

• Allows to set animation speed.

2015-10-12

• bugfix

---

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