| Name |
Type |
Default value |
animationDuration
data-animationDuration | Number (integer) | 1000 |
| Number of milliseconds the slide animation last. |
autoHideLabel
data-autoHideLabel | Boolean | false |
| Indicates whether labels are hidden when the mouse moves out from the slider area. |
autoHideLinks
data-autoHideLinks | Boolean | true |
| Indicates whether slide links are hidden when the mouse moves out from the slider area. |
autoHideNavigation
data-autoHideNavigation | Boolean | true |
| Indicates whether navigation buttons are hidden when the mouse moves out from the slider area. |
autoStart
data-autoStart | Boolean | true |
| Indicates whether slideshow starts immediately after it's completely loaded. |
direction
data-direction | String | left |
| Slide direction, can be one of four directions: left, right, top, bottom |
| navigationLocation | Object | (see details below) |
| Object that determines the navigation buttons location, it's dimensions, anchor and docking.
Object available properties are: top, left, width, height, anchor and dock.
top and left - integers, position of element in pixels
width and height - integers, dimension of element in pixels or "auto" which is the default value if width and height is not given.
anchor - determines element's anchor, that is in which slideshow corner is the 0,0 location. Can have one of these values: top-left, top-right, bottom-left, bottom-right.
dock - determines if and how the element is docked in slideshow container. Can have one of these values: top, bottom, left, right, none.
Example
$("#my-slideshow").slideshow({
navigationLocation : {
top: 50,
left: 100,
width: 200,
height: 75,
anchor: "top-right",
dock: "none"
}
); |
| data-navigationLocation | String | (empty string) |
| String that determines the navigation buttons location, it's dimensions, anchor and docking.
Those properties should be given in a one of these formats:
top,left,width,height,anchor,dock
top,left,width,height,anchor
top,left,width,height
top,left,width-and-height
top,left,anchor,dock
top,left,anchor
top,left
top and left - integers, position of element in pixels
width and height - integers, dimension of element in pixels or "auto" which is the default value if width and height is not given.
anchor - determines element's anchor, that is in which slideshow corner is the 0,0 location. Can have one of these values: top-left, top-right, bottom-left, bottom-right.
dock - determines if and how the element is docked in slideshow container. Can have one of these values: top, bottom, left, right, none.
Example
50,100,200,75,top-right,none - element is located 50 pixels to the left from the right slideshow edge and 100 pixels from the top slideshow edge. Elements width is 200 pixels and it's height is 75 pixels. It's anchored to the top-right slideshow corner and it's not docked.
|
| linkSeparator | String | <div class="link-separator"> </div> |
| A string that determines the separator between slide links. It can be set by a member of slideshow constructor parameter or by defining HTML element with "link-separator" class as a child of a HTML element with "slideshow-container" class. |
| linksLocation | Object | (see details below) |
| Object that determines slide links container location, it's dimensions, anchor and docking.
Object available properties are: top, left, width, height, anchor and dock.
top and left - integers, position of element in pixels
width and height - integers, dimension of element in pixels or "auto" which is the default value if width and height is not given.
anchor - determines element's anchor, that is in which slideshow corner is the 0,0 location. Can have one of these values: top-left, top-right, bottom-left, bottom-right.
dock - determines if and how the element is docked in slideshow container. Can have one of these values: top, bottom, left, right, none.
Example
$("#my-slideshow").slideshow({
linksLocation : {
top: 50,
left: 100,
width: 200,
height: 75,
anchor: "top-right",
dock: "none"
}
); |
| data-linksLocation | String | (empty string) |
| String that determines slide links container location, it's dimensions, anchor and docking.
Those properties should be given in a one of these formats:
top,left,width,height,anchor,dock
top,left,width,height,anchor
top,left,width,height
top,left,width-and-height
top,left,anchor,dock
top,left,anchor
top,left
top and left - integers, position of element in pixels
width and height - integers, dimension of element in pixels or "auto" which is the default value if width and height is not given.
anchor - determines element's anchor, that is in which slideshow corner is the 0,0 location. Can have one of these values: top-left, top-right, bottom-left, bottom-right.
dock - determines if and how the element is docked in slideshow container. Can have one of these values: top, bottom, left, right, none.
Example
50,100,200,75,top-right,none - element is located 50 pixels to the left from the right slideshow edge and 100 pixels from the top slideshow edge. Elements width is 200 pixels and it's height is 75 pixels. It's anchored to the top-right slideshow corner and it's not docked.
|
loop
data-loop | Boolean | true |
| Indicates whether slideshow is looped or not. |
| navigationLocation | Object | (see details below) |
| Object that determines the navigation buttons container location, it's dimensions, anchor and docking.
Object available properties are: top, left, width, height, anchor and dock.
top and left - integers, position of element in pixels
width and height - integers, dimension of element in pixels or "auto" which is the default value if width and height is not given.
anchor - determines element's anchor, that is in which slideshow corner is the 0,0 location. Can have one of these values: top-left, top-right, bottom-left, bottom-right.
dock - determines if and how the element is docked in slideshow container. Can have one of these values: top, bottom, left, right, none.
Example
$("#my-slideshow").slideshow({
navigationLocation : {
top: 50,
left: 100,
width: 200,
height: 75,
anchor: "top-right",
dock: "none"
}
);
Element is located 50 pixels to the left from the right slideshow edge and 100 pixels from the top slideshow edge. Elements width is 200 pixels and it's height is 75 pixels. It's anchored to the top-right slideshow corner and it's not docked.
|
| data-navigationLocation | String | (empty string) |
| String that determines the navigation buttons container location, it's dimensions, anchor and docking.
Those properties should be given in a one of these formats:
top,left,width,height,anchor,dock
top,left,width,height,anchor
top,left,width,height
top,left,width-and-height
top,left,anchor,dock
top,left,anchor
top,left
top and left - integers, position of element in pixels
width and height - integers, dimension of element in pixels or "auto" which is the default value if width and height is not given.
anchor - determines element's anchor, that is in which slideshow corner is the 0,0 location. Can have one of these values: top-left, top-right, bottom-left, bottom-right.
dock - determines if and how the element is docked in slideshow container. Can have one of these values: top, bottom, left, right, none.
Example
50,100,200,75,top-right,none - element is located 50 pixels to the left from the right slideshow edge and 100 pixels from the top slideshow edge. Elements width is 200 pixels and it's height is 75 pixels. It's anchored to the top-right slideshow corner and it's not docked.
|
onAfterAnimation
data-onAfterAnimation | Function | null |
| This function is called after the slide animation is completed. |
onBeforeAnimation
data-onBeforeAnimation | Function | null |
| This function is called before the slide animation is started. |
onInit
data-onInit | Function | null |
| This function is called when the slideshow is initialized, before the slide images are loaded. |
onLinkClicked
data-onLinkClicked | Function | null |
| This function is called when the user clicks the slide. If this function returns false, then the action (user redirection) is cancelled. |
onLoad
data-onLoad | Function | null |
|
This function is called after the slideshow is initialized and after all slideshow images are completely loaded.
Example
$("#my-slideshow").slideshow({
onLoad : function(){
alert('All slides were loaded');
}
);Example 2
<div id="my-slideshow" class="slideshow-container"
data-onLoad="alert('All slides were loaded');">
<div class="slide">
<img class="slide-content" src="big-buck-bunny/1.jpg" alt=""/>
</div>
</div> |
onPause
data-onPause | Function | null |
| This function is called when the slideshow is paused (whether by user or programmatically). |
onSlideChanged
data-onSlideChanged | Function | null |
| This function is called when the current slide has changed. |
onSlideLinkClicked
data-onSlideLinkClicked | Function(index) | null |
|
This function is called when the user clicks slide link. A zero-based index as a parameter is passed with this function call. Slide change procedure can be cancelled if this function returns false.
Example
$("#my-slideshow").slideshow({
onLoad : function(index){
alert('Slide link #' + (index+1) + ' was clicked');
return (index % 2 == 0);
}
); |
onStart
data-onStart | Function | null |
| This function is called when the slideshow starts (whether by user or programmatically). |
pauseDuration
data-pauseDuration | Number (integer) | 5000 |
| Number of milliseconds the pause between slide animation last. |
showLabel
data-showLabel | Boolean | true |
| Indicates whether labels are visible. |
showNavigation
data-showNavigation | Boolean | true |
| Indicates whether navigation buttons container is visible. |
showLinks
data-showLinks | Boolean | true |
| Indicates whether slide links container is visible. |
showOverlay
data-showOverlay | Boolean | true |
| Indicates whether overlay image is shown. |
skin
data-skin | String | default |
| A skin name used by the slideshow. Note, that CSS skin definition should be added to HTML document. |
Note that roundness and shadows are not supported by some older Internet Explorer and Opera browsers. Please consider that before downloading this slideshow item.