Generic Slider / Carousel Plugin with jQuery - Short Slider

File Size: 1.34 MB
Views Total: 2716
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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.


  • 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="//"></script> 
<script src="js/jquery.shortslider.js"></script>

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

<div class="slide-demo">
    <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>

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

  style : 'carousel'

4. All configuration options.


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


  • Allows to set animation speed.


  • bugfix

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