Simple jQuery Image Slider with Random Animations - jis
File Size: | 39 KB |
---|---|
Views Total: | 9651 |
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.