Slideshow

function

Slideshow()

Option name	Type	Description
element	domelement	The element to act as a slideshow, containing one or more children with class 'js-slide' or 'slide'
options	object	An object contianing the settings for this slideshow autoPlay {boolean: true} If true, the slideshow will automatically cycle (and rotate) through slides slide {boolean: false} When moving through slides, animate them from outside the selector and into view fade {boolean: false} When moving through slides, fade the next one in on top of the previous slide. This mode will be used if the 'slide' option is set to false vertical {boolean: false} If true, slides will move up and down, instead of sideways. This only applies when options.slide has been set to true delay {number: 4000} The time, in milliseconds, to stay on each slide before starting to animate in the next one duration {number: 600} The time, in milliseconds, that a transition between slides takes easing {string: "linear"} The easing function to use when animating between slides useCaptions {boolean: false} Enables the cycling of caption elements alongside the cycling of the slides themselves. Caption elements must have class 'js-caption' or 'caption' pips {boolean: false} Enables the use of clickable pips representing the total number of slides, and the currently active slide touch {boolean: true} Enables the use of swipe gestures to move between slides swipeTolerance {number: 100} The distance a finger must travel before the gesture is regonised as a swipe. Only used if the 'touch' option is set to true

Dependencies:

NATION.Utils
NATION.EventDispatcher
Either NATION.Animation or jQuery

About:

A JavaScript-powered slideshow.

In order to function correctly, the HTML representing each slide should have a classname of either 'js-slide' or 'slide'.

If previous/next buttons are required, these should have class 'js-next' and 'js-previous', or 'next' and 'previous'.

If captions are required, a container must exist with class 'js-captions' or 'captions'. To define a caption for a slide, include elements with the class 'js-caption' or 'caption' anywhere inside selector. These will be gathered and moved into the .captions element by this class, so it's wise to ensure that caption styles aren't affected by the move into the captions container element.

If a current slide display is requird, selector must contain an element with classname 'js-current' or 'current'
If a total slides display is required, selector must contain an element with classname 'js-total' or 'total'

If clickable pips are required, an element should exist with class 'js-pips' or 'pips'. Each element that represents a single pip should have class 'js-pip' or 'pip'.

Example

SLIDE_CHANGE

property

Slideshow.prototype.SLIDE_CHANGE

An event that fires when the current slide is about to change

IMAGE_LOAD_COMPLETE

property

Slideshow.prototype.IMAGE_LOAD_COMPLETE

An event that fires when all images found within the slideshow have loaded

getCurrentSlideID

method

Slideshow.prototype.getCurrentSlideID() ->number

Returns the zero-indexed ID of the currently visible slide

getTotalSlides

method

Slideshow.prototype.getTotalSlides() ->number

Returns the total number of slides

startAutoCycling

method

Slideshow.prototype.startAutoCycling()

Start automatically rotating through images

stopAutoCycling

method

Slideshow.prototype.stopAutoCycling()

Stop automatically rotating through images

showSlide

method

Slideshow.prototype.showSlide()

Option name	Type	Description
slideID	number	The ID (zero-indexed) of the slide to show
immediate	boolean	If true, no animation will play, and the slide change will happen immediately

Show a slide specified by slideID, either via slide or fade, depending on the slideshow options. This will also stop autoCycling if that was active