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 -lXor use ready files in directories.
Change Log
v1.0 - Mar 03, 2015
- Initialize version 1.0
License
This is licensed under the MIT License.
