Generic Slider / Carousel Plugin with jQuery - Short Slider

Generic Slider / Carousel Plugin with jQuery - Short Slider
File Size: 1.34 MB
Views Total: 2641
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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.