Flexible Mobile-friendly jQuery Slider Plugin - hiSlider.js

hiSlider.js is a simple, responsive, mobile-friendly jQuery image slider plugin that supports flexible layout, touch events and comes with lots of customization options.

How to use it:

1. Add jQuery JavaScript library and the jQuery hiSlider plugin's files to the webpages.

<link rel="stylesheet" href="css/jquery.hiSlider.min.css">
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="js/jquery.hiSlider.min.js"></script>

2. Create a list of images for the slider.

<ul class="hiSlider demo">
  <li data-title="1" class="hiSlider-item">
    <img src="1.jpg" alt="1">
  </li>
  <li data-title="2" class="hiSlider-item">
    <img src="2.jpg" alt="2">
  </li>
  <li data-title="3" class="hiSlider-item">
    <img src="3.jpg" alt="3">
  </li>
  <li data-title="4" class="hiSlider-item">
    <img src="4.jpg" alt="4">
  </li>
  <li data-title="5" class="hiSlider-item">
    <img src="5.jpg" alt="5">
  </li>
</ul>

3. Initialize the plugin to convert the image list into a basic image slider with default options.

$('.demo').hiSlider();

4. All configuration options with default values.

$('.demo').hiSlider({

  // start index
  startSlide: 0,

  // item selector
  item: '.hiSlider-item',

  // fullscreen mode
  isFullScreen: false,

  // flexible layout
  isFlexible: false,

  // touch events support
  isSupportTouch: '__proto__' in {},

  // enable pagination
  isShowPage: true,

  // enable title bar
  isShowTitle: true,

  // title attribute
  titleAttr: 'data-title',

  // enable navigation
  isShowControls: true,

  // autoplay
  isAuto: true,

  // autoplay interval
  intervalTime: 5000,

  // animation speed
  affectTime: 300,

  // fade || move
  mode: 'move',

  // left || top
  direction: 'left',

  // callbacks
  onSwipeStart: $.noop,
  onSwipeMove: $.noop,
  minSwipeLength: 30,
  onSwipeCancel: $.noop,
  onSwipeEnd: $.noop,
  onSwipeLeft: $.noop,
  onSwipeRight: $.noop,
  onSwipeTop: $.noop,
  onSwipeBottom: $.noop,
  onInited:  $.noop,
  onMoveBefore: $.noop,
  onMoveAfter: $.noop,
  onSelected: $.noop
  
});

Change log:

2016-03-02

• bugfix

---

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