JiS

---

This is “Images slider for jQuery framework” Check out the demo

Required

• jQuery framework >= 1.8
• [* JRE for build]

Features

• Light weight (min. 14KB code)
• Smooth animation with low cpu usage
• Cross browser support (IE, Chrome, Firefox, Opera, Vivaldi)
• Wide API interfaces
• Easy to adapt skins, customize the way you like
• Uses a module animation
• Supports custom animations
• Customize the way you like

How to Use

Install the slider in the footer

  <script src="/javascript/jis.jquery.min.js"></script>
  <script>$(function() {$('#slider').jis({})});</script>

Markup is pretty straightforward, it looks something like this

<ul id="slider">
  <li><a href="#"><img src="slide-1.jpg" alt="Title slide 1" /></a></li>
  <li><a href="#"><img src="slide-2.jpg" alt="Title slide 2" /></a></li>
  <li><a href="#"><img src="slide-3.jpg" alt="Title slide 3" /></a></li>
</ul>

or add special class for your <ul> element <ul class="jis-trigger">.

Options

Option	Default	Description
title	true	[boolean] Display title text
effect	'random'	[string] or [function] Slides used effect. Supported ['random', 'selectRandom', 'randomSlide', 'randomStrips', 'slideX', 'slideY', 'strips']
row	3	[number] Count row in create table effect
cell	20	[number] Count cell in create table effect
auto	true	[boolean] Auto scrolling slideshow
speed	800	[number] Speed scrolling slideshow
pause	3500	[number] Pause before scrolling slideshow
pauseHover	true	[boolean] Stop scrolling slideshow in hover slide
recursion	true	[boolean] Recursive scrolling slideshow
start	1	[number] Start init slide
directionNav	true	[boolean] Display navigation arrows
controlNav	true	[boolean] Display navigation buttons
random	false	[boolean] Start random init slide
nextText	'Next'	[string] Text navigation arrow next
prevText	'Prev'	[string] Text navigation arrow prev
width	false	[boolean] or [string] Set the width of the slider
height	false	[boolean] or [string] Set the height of the slider

Callback

Option	Default	Description
callback.init	$.noop	[function] Callback init slider
callback.before	$.noop	[function] Callback for up to the next slide
callback.after	$.noop	[function] Callback for up to the prev slide
callback.last	$.noop	[function] Callback when the last slide
callback.first	$.noop	[function] Callback when the first slide

Animate

Option	Default	Description
animate.title	function (title)	[function] Animate title show slide

Custom Animations

$.fn.jis.effect = $.extend({
  fade: function (current, next, params)
  {
      $(current).fadeOut(params.speed);
      this.saveStyle(next, ['position']);
      $(next).css('position', 'absolute').fadeIn(params.speed, $.proxy(function (current)
      {
          this.restoreStyle(current);
      }, this, next));
  }
}, $.fn.jis.effect);

or used option only for one animation

$('#slider').jis({
  effect: function (current, next, params)
  {
      $(current).fadeOut(params.speed);
      this.saveStyle(next, ['position']);
      $(next).css('position', 'absolute').fadeIn(params.speed, $.proxy(function (current)
      {
          this.restoreStyle(current);
      }, this, next));
  }
});

Build

cd ~ && git clone https://github.com/demorfi/jis.git jis && cd jis
make && ls builds -lX

# rebuild
make clean && make && ls builds -lX

or use ready files in directories.

Change Log

v1.0 - Mar 03, 2015

• Initialize version 1.0

License

This is licensed under the MIT License.