Simple jQuery Image Slider with Random Animations - jis

Simple jQuery Image Slider with Random Animations - jis
File Size: 39 KB
Views Total: 8383
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

jis is an easy-to-use jQuery plugin that converts a list of images into a fully customizable image slider / slideshow with random smooth transition effects.

Features:

  • Custom animations.
  • Lots of customzation options.
  • Bottom image caption bar.
  • Autoplay (Slideshow mode).
  • Arrows navigation and bullets pagination.

How to use it:

1. Load the required jis.min.css in the head section of the document.

<link rel="stylesheet" href="stylesheets/jis.min.css">

2. Add a list of images to the slider. The plugin will automatically generate captions from the image's alt attribute and display them in a sliding caption bar.

<ul class="demo">
  <li>
    <a href="#">
      <img src="1.jpg" alt="Alt 1"> 
    </a> 
  </li>
  <li>
    <a href="#">
      <img src="2.jpg" alt="Alt 2"> 
    </a> 
  </li>
  <li>
    <a href="#">
      <img src="3.jpg" alt="Alt 3"> 
    </a> 
  </li>
  ...
</ul>

3. Load jQuery library and the jQuery jis plugin's script at the bottom of the document.

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

4. Call the plugin on the top ul element.

$('.demo').jis();

5. Configurable options.

// Title text
'title'       : true,

// Transition effects [random, selectRandom, randomSlide, randomStrips, slideX, slideY, strips]
'effect'      : 'random',

// Autoplay
'auto'        : true,

// Animation speed
'speed'       : 800,

// Pause before scrolling
'pause'       : 3500,

// Pause on hover
'pauseHover'  : true,

// Recursive scrolling
'recursion'   : true,

// Init slide
'start'       : 1,

// Display navigation arrows
'directionNav': true,

// Display navigation arrows
'controlNav'  : true,

// Random init slide
'random'      : false,

// Text for next button
'nextText'    : 'Next',

// Text for previous button
'prevText'    : 'Prev',

// The width of the slider
'width'       : false,

// The height of the slider
'height'      : false,

// Callbacks
'callback'    : {
    'init'  : $.noop,
    'before': $.noop,
    'after' : $.noop,
    'last'  : $.noop,
    'first' : $.noop
},

// Custom animations
'animate'     : {

    /**
     * Animate title show slide.
     *
     * @param {string} title jQuery selector title
     * @return {void}
     */
    'title': function (title)
    {
        var bottom = $(title).css('bottom');

        $(title).css({
            'opacity': 0,
            'bottom' : 0
        }).show().animate({
            'opacity': 1,
            'bottom' : bottom
        }, this.getOption('speed'));
    }
},

// CSS classes
'class'       : {
    'wrapper'      : 'jis-wrapper',
    'title'        : 'jis-title',
    'direction'    : 'jis-direction',
    'directionNext': 'jis-direction-next',
    'directionPrev': 'jis-direction-prev',
    'control'      : 'jis-control',
    'controlList'  : 'jis-control-list',
    'selected'     : 'jis-selected',
    'init'         : 'jis-init',
    'loading'      : 'jis-loading',
    'last'         : 'jis-slide-last',
    'first'        : 'jis-slide-first',
    'recursion'    : 'jis-slide-recursion',
    'grid'         : 'jis-grid',
    'gridRow'      : 'jis-grid-row',
    'gridCell'     : 'jis-grid-cell'
}

Change log:

2015-07-31

  • Fix auto change slide after change slide

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