Sliderman.js API v1.3.8
Sliderman class
Methods
slider(obj sliderParameters) : initializes the slider and returning Slider object which you can later work with.
effect(obj slidermanEffect) : adds a sliderEffect to the list of available effects.
easing(obj slidermanEasing) v1.3.0 : adds a slidermanEasing to the list of available easings.
order(obj slidermanOrder) v1.3.0 : adds a slidermanOrder to the list of available orders.
Slider class
Methods
go(int index) : go to slide specified by index. Numeration starts from 0 (zero).
next() : go to next slide
prev() : go to previous slide
get(str parameterName) v1.1 : returns Slider parameter specified by parameterName
Available parameters:
length - total slides count
previous - previous slide index
current - current slide index
images - array of images' paths. Returns array of DOM Objects (read slide) if contentmode is set to true
links - array of links/maps DOM Objects
descriptions - array of slides descriptions
random() v1.3.0 : go to random slide
play() v1.3.5 : begins slideshow. If slider was paused it will resume autoplay.
pause() v1.3.5 : pauses slideshow. Only works if slider is currently showing slides.
stop() v1.3.5 : stops slideshow.
start() v1.3.5 : stops slideshow first and then resumes it from the start. Equivalent to stop() and then play() methods.
Please note, that play(), pause(), stop(), start() methods will only work if autoplay parameter of displayOptions object is set and isn't false.
sliderParameters obj
Properties:
container string : id of the slider container
width int : slider width in pixels
height int : slider height in pixels
contentmode bool v1.2 : if true - any html element can be a slide (each child element of the container will become a slide). If set to false - every image become a slide, image links and image descriptions are supported. Default false
Any html tag can be a slide. You may use, for example, a set of div elements, i.e. <div class="mySlide">html content</div>
If set true any zooming effect will be disabled. Also, use of image description elements make no sense as well. You can just add any html content to every slide.
Please note, some of html tags cannot act as a valid slides. For example, if you set iframe(s) into one slide, the animation will be distorted. Avoid html tags like iframe, object, video, applet, scripts etc
effects mixed : effects to be used. Can be an object (slidermanEffect), string (name of effect), array of strings and/or objects
display obj : display options for slides like buttons, autoplay, image captions, navigation etc.
events obj v1.1 : events options to define callbacks.
slidermanEffect obj
Properties:
fade bool : on/off fading effect for the elements.
move bool : on/off moving effect for the elements.
zoom bool : on/off zooming effect for the elements.
top, right, bottom, left bool : start position of effect. Use only one. i.e., left: true.
chess bool : every second element changes its direction on opposite.
cols int : number of columns to split the slide.
rows int : number of rows to split the slide.
delay int : delay after which the next element starts to animate (in miliseconds).
duration int : effect duration for each slide element (in miliseconds).
order str : slider elements order appearance. Possible values: random, straight, straight_stairs, swirl, snake, squarev1.3.0, rectanglev1.3.0, circlev1.3.0, crossv1.3.0, rectangle_crossv1.3.0.
reverse bool : reverse slider order.
road str : direction of slide's elements order. Possible values: TR, RB, BL, LT, RT, BR, LB, TL.
The road defines the next element to select. T,R,B,L stand for Top, Right, Bottom, Left. For example, RB - start from 1st row and 1st column, go right to the end of the row, then go bottom to the next row and then right again etc. Using TL – start from last row and last column, go top to the first row, then go left to the last row, last-1 column, then go top again etc. Makes no sense if order is set to random.
Note: Element is actually a piece of an image involved in animation. If you have 2 rows and 3 cols, then you have image splitted onto 6 elements.
easing str v1.3.0 : slider animation easing function. Possible values: none, swing, wave, bounce. Default swing. Can also be a custom name, which was defined by slidermanEasing
eventsOptions object
Properties:
loading function : function call before starting loading slide.
before function : function call before slide animation.
after function : function call after slide animation.
displayOptions object
Properties:
autoplay int : slideshow timeout (in miliseconds). If not set autoplay will be disabled (only manual navigation). You may also check auto_start property.
autostart bool v1.3.5 : enables/disables slideshow autostart. Default true.
pause bool : autoplay pause on hover on/off.
always_show_loading int : loading image timeout (in milliseconds). Default 1000 (1 second). Useful for testing to view how loading box and image look like. Remove this parameter on production server.
loading sliderLoading : loading options. If not set no loading image will be shown.
description sliderDescription : description options, If not set description box will not be shown.
buttons sliderButtons : buttons (Next/Previous) options. If not set buttons Next/Previous will not be shown.
navigation sliderNavigation : navigation options. If not set navigation will not be shown.
mousewheel bool v1.1 : mouse wheel navigation on/off. Default false.
random bool v1.3.0 : if true - slides will be shown randomly in autoplay. Default false.
Please note that next/prev arrows and methods will still work normally by showing the next/previous slides respectively.
loop int v1.3.0 : define autoplay loops count. Default 0 (infinite loops).
Using loop and random simultaneously may cause some slides will not show. This is not a bug but intended functionality.
effects_order mixed v1.3.5 : defines effects for the slides. Currently available values (strings): random, slides, effects. Default: random
If set to random then effect will be randomly chosen from all the available effects.
If set to slides then each slide will use the appropriate effect. First slide will use the defined effect, second slide - 2nd effect and so on. Please note, if u have more effects than total slides, some effects will never occur.
If set to effects then slides effects rotation will be based on total effects count. For example, if you have 4 slides and 8 effects, then 2nd slide will be shown either with 2nd or 6th effects. 6th effect will occur every second cycle (i.e. even).
first_slide bool v1.3.5 : disables/enables first slide showing immediately on init. Default false. If set to true, the first slide/image will appear without any animation. Very useful when autostart is set to false.
sliderLoading object
Properties:
background string : loading background color.
opacity float : loading background opacity.
image string : path to loading image.
sliderDescription object
Properties:
hide bool : If true shows/hides description on mouseover/mouseout. Otherwise is always visible (if description is present).
background string : description background color.
opacity float : description background opacity.
position string : description position (top, right, bottom, left).
width, height int : width/height of description area (in pixels, width for left/right position, height — top/bottom). Default is 20% of slide width/height.
sliderButtons object
Properties:
hide bool : If true shows/hides description on mouseover/mouseout. Otherwise is always visible (if description is present).
opacity float : buttons opacity.
prev sliderButton : options for button Previous
next sliderButton : options for button Next
sliderButton object
Properties:
className string : CSS class to apply to an element. You may style button using background image in CSS.
label string : text for an element, i.e. 'Prev', 'Next' or empty string (''). For navigation buttons default will be 'prev' and 'next'.
sliderNavigation object
Properties:
container string : id of navigation element container.
className string : CSS class to apply to navigation container. Can be used for easier CSS styling
label mixed : If true navigation links labeled by slide's positions (i.e. 1,2,3,...). Otherwise labeled by the specified value.
For bullets instead of page numbers use '<img src="clear.gif" />' and then style your bullets in css as background images.
prev sliderButton v1.2 : options for button Previous in Navigation section (pages/bullets)
next sliderButton v1.2 : options for button Next in Navigation (pages/bullets)
slidermanEasing object v1.3.0
Properties:
name string v1.3.0 : title of the custom easing method. Will be used while defining easing in the slidermanEffect object.
method function v1.3.0 : custom easing method. Using float number from 0 to 1 as a progress indicator (input parameter). This method must return float.
Example:
{
name: 'pow2',
method: function(x) {
return Math.pow(x,2);
}
}
slidermanOrder object v1.3.0
Properties:
name string v1.3.0 : title of the custom ordering method. Will be used while defining order in the slidermanEffect object.
nocache bool v1.3.0 : if true - disables caching for the ordering method results. Default false (ordering cache enabled).
method function v1.3.0 : custom ordering method. Must return array of key/values pairs. Keys are the following strings: 'ROW_NUMBER,COL_NUMBER'. Values are integer: ORDER_NUMBER. Input parameter is a filtered effectOptions object.
Example:
{
name: 'simple_order',
nocache: false, // this is for illustrating purposes and actually not needed. it is false by default.
method: function(effect) {
var a = [], r, c;
for(r = 0; r < effect.rows; r++) {
for(c = 0; c < effect.cols; c++) {
a[r+','+c] = r*effect.cols+c;
}
}
return a;
}
}
