Home

Welcome to the IMA-jQuery-Slider wiki!

Demo

To see the different demos, go below in the section Different styles

Description

The difference between this slider and all the other sliders is its ease to be customized using CSS3. Absolutely no customization is done in jQuery.

For this plugin, each <li></li> is called a slide

What you need to know in order to use this plugin

• HTML
• CSS
• jQuery
• JSON Syntax
• How to extend parameters passed to a plugin easily in jQuery (next paragraph)

How to extend parameters passed to a plugin easily in jQuery

Source: http://www.sitepoint.com/how-to-develop-a-jquery-plugin/

For those of you who aren't used to this method for passing arguments to a function, there is a genius way to do that and it is explained just after. I feel it is necessary for anyone that wants to use this plugin to know how it works since you will have to use it if you want to override the default parameters.

Plugin Parameters

We require two parameters for our plugin: minlength and maxlength. It is easiest to define these as function arguments, e.g.

(function($) {
$.fn.reverseText = function(minlength, maxlength) { ... };
})(jQuery);

// example
$("p").reverseText(0, 100);

But what if we decide to add further parameters later? Our plugin could have dozens of options — parameter handling would quickly become convoluted. As an alternative, we could pass a single JSON object, e.g.

(function($) {
$.fn.reverseText = function(params) { ... }
})(jQuery);

// example
$("p").reverseText( { minlength: 0, maxlength: 100 } );

The first line in our reverseText function should define a set of default parameters then overwrite these with any user-defined values. The jQuery extend function can handle this for us:

// merge default and user parameters
params = $.extend( {minlength: 0, maxlength: 99999}, params);

Therefore, params.minlength is 0 and params.maxlength is 99999 unless the calling code overrides those values.

Required elements in your code

Event though it is fully customizable, this plugin needs a certain structure in order for it to work. Here's what it need in 3 sections (HTML, CSS, jQuery)

This is the required html code.

Note: You can set the id to what you want. You just have to pass your new id to the plugin via the parameters

HTML

<div id="IMA-sliderContainer">
    <ul id="IMA-slider">
        <li></li> <!-- You can have as many li that you want. Each li is a slide -->
    </ul>
</div>

jQuery

Note: This code must go just below the previous html code.

<script>
$(document).ready(function(){
    $('#IMA-slider').slider({
        //Here, all the parameters will go
    });
});
</script>

There are many different slider styles available with this plugin.

Different styles

1. Simple slider with different images
2. Background image with different elements animated

Simple slider with different images

This is the default style of the slider. You simply put each slide one after another and they will switch from one to the next. One slide is simply anything that is inside a <li></li> tag.

Here are the options that can be customized:

• You can set it to autoplay
• You can adjust the duration between each image or slide.
• You can change any properties, even the class name, (all of them are in CSS) of the left and right controls.