TiledSlideshow

function

TiledSlideshow()

Option name	Type	Description
selector	domelement_or_querystring_or_jqueryobject	The element containing all of the slides, and the optional navigation
options	object	Object containing settings for the slideshow loop {boolean} If true, the slideshow will loop around infinitely. To achieve seamless looping, some slides will be duplicatd behind the scenes autoPlay {boolean} If true, the slideshow will move through the slides automatically delay {number: 4000} The length of time, in milliseconds, to wait on a set of slides before moving to the next set duration {number: 600} The length of time, in milliseconds, an animation between sets of slides takes easing {string: "linear"} The easing function to use during an animation between sets of slides animateTransitions {boolean: true} If this is set to false, slide sets will change instantly, without an animation disableSpaceFilling {boolean: false} If this is true, this stops the slideshow from create duplicate slides to fill in space when there aren't enough slides to fill the available visible space. When false (default), if there is only one slide with width 25%, the slideshow creates 3 duplicates of that slide to fill the area

Dependencies:

NATION.Utils
NATION.EventDispatcher

About:

Carousel that shows slides in groups, with the number depending on the current styles
The selector must contain one or more elements with class ".js-slide"/".slide", as these are considered the individual slide elements
The selector may also contain navigation, in the form of elements with class "js-next"/"next" and "js-previous"/"previous". This functionality is handled automatically if these are found

The direct parent of the slide elements will be sized and postioned automatically to hold all slides in one row. Somewhere above this you will want an element with a width set, and overflow set to hidden, to hide the 'out of view' slides

Built to work with responsive styles, so the number of slides visible at once can be changed via CSS

Example

NEXT_CLICKED

property

TiledSlideshow.prototype.NEXT_CLICKED

Even that fires when the next button is clicked

PREVIOUS_CLICKED

property

TiledSlideshow.prototype.PREVIOUS_CLICKED

Event that fires when the previous button is clicked

AUTOPLAY_TIMER

property

TiledSlideshow.prototype.AUTOPLAY_TIMER

Event that fires when it's time to automatically move to the next set of slides

VISIBLE_SLIDES_CHANGED

property

TiledSlideshow.prototype.VISIBLE_SLIDES_CHANGED

Event that fires when the number of slides shown at once has changed. This happens when the browser is resized and the styles change in a media query

startAutoCycling

method

TiledSlideshow.prototype.startAutoCycling()

Start moving through slides automatically

stopAutoCycling

method

TiledSlideshow.prototype.stopAutoCycling()

Stop moving through slides automatically

getCurrentSlideID

method

TiledSlideshow.prototype.getCurrentSlideID() ->number

Return the zero-indexed ID of the slide currently visible on the left

getVisibleSlides

method

TiledSlideshow.prototype.getVisibleSlides()

Returns the number of slides visible at any one time

showNextSlides

method

TiledSlideshow.prototype.showNextSlides()

Show the next set of slides

showPreviousSlides

method

TiledSlideshow.prototype.showPreviousSlides()

Show the previous set of slides

showSlide

method

TiledSlideshow.prototype.showSlide()

Option name	Type	Description
slideID	number	Zero-indexed ID of the first slide to show
immediate	boolean	If true, the slide change will happen without an animation
reverseDirection	boolean	If true, the transition between slidesets will happen by moving the slides right. This can make sense when slideID is less than the currently visible slide ID

Move to a set of slides starting with the specified slide ID