Control freak? Then you'll love this part.

We've packed a heaps of settings into Slippry, from simple transition styles, to timing, to changing the HTML wrappers.

So what are you waiting for? Have a look!

general elements & wrapper

slippryWrapper

Markup to be used for the entire slider (including the pager). 
default: '<div class="sy-box" />'
accepts: Any valid HTML element (almost) can be used, but we recommend <div>, <section>.

slideWrapper

Markup to be used to wrap the slides and controls (think of it as the viewport) 
default: '<div class="sy-slides-wrap" />'
accepts: Any valid HTML element (almost) can be used, but we recommend <div>, <section>.

slideCrop

Markup to be used to wrap just the slides. 
default: <div class="sy-slides-crop" />
accepts: Any valid HTML element (almost) can be used, but we recommend <div>, <section>.

boxClass

The class that is applied to the original slide parent element (e.g. the <ul> element). 
default: 'sy-list'
accepts: Any string that is valid as a class in CSS.

elements

HTML element used for each slide. 
default: 'li'
accepts: Any HTML element that is styled as a block element. We recommend <li>, <div>, <article> or <section>.

activeClass

The class applied to the current (visible) slide. 
default: 'sy-active'
accepts: Any string that is valid as a class in CSS.

fillerClass

The class for the element that acts as an intrinsic placeholder (basically the element which makes sure the slider is sized correctly). 
default: 'sy-filler'
accepts: Any string that is valid as a class in CSS.

loadingClass

The class applied to `slippry_wrapper` while Slippry slider is being loaded. 
default: 'sy-loading'
accepts: Any string that is valid as a class in CSS.

options

adaptiveHeight

The slider height should change on the fly according to the current slide. 
default: true
accepts: true, false

start

The slide number that should be displayed first. 
default: 1
accepts: integer (1 = first slide), random

loop

Whether the slider should loop (i.e. the first slide goes to the last, the last slide goes to the first). 
default: true
accepts: true, false

captionsSrc

Specifies the source of the captions. When img, captions will be taken from the title or alt attributes, when any other element it will be taken from the title attribute. 
default: 'img'
accepts: 'img' or any element.

captions

Specifies the position of captions or no captions at all. *Custom allows you to specify the class of an element in which to insert the captions. 
default: 'overlay'
accepts: 'overlay', 'below', 'custom', false

captionsEl

The element for the captions. Note, this can be a box outside of .slippry_box. 
default: '.sy-caption'
accepts: Any jQuery selector.

initSingle

Whether the slider should initialise even if there is only one slide element. 
default: true
accepts: true, false

responsive

Whether the slider should be responsive. 
default: true
accepts: true, false

preload

Elements that are preloaded before slider shows. 
default: 'visible'
accepts: 'visible', 'all'

pager

pager

Whether the slider should have a pager. 
default: true
accepts: true, false

pagerClass

The class given to the slider container. 
default: 'sy-pager'
accepts: Any string that is valid as a class in CSS.

controls

controls

Whether the slider should have controls (next, previous arrows). 
default: true
accepts: true, false

controlClass

The class for the controls container. 
default: 'sy-controls'
accepts: Any string that is valid as a class in CSS.

prevClass

The class for the anchor tag to go to the previous slide (left). 
default: 'sy-prev'
accepts: Any string that is valid as a class in CSS.

prevText

The text for the previous slide control (important for screen readers). 
default: 'Previous'
accepts: Any text string.

nextClass

The class for the anchor tag to go to the previous slide (right). 
default: 'sy-next'
accepts: Any string that is valid as a class in CSS.

nextText

The text for the next slide control (important for screen readers). 
default: 'Next'
accepts: Any text string.

hideOnEnd

Hide the previous or next control when it reaches the first or last slide respectively. 
default: true
accepts: true, false

transitions

transition

Transition type to use, or no transitions. 
default: 'fade'
accepts: 'fade', 'horizontal', 'vertical', 'kenburns', false

kenZoom

Max zoom level use for the Ken Burns transition. 
default: 120
accepts: any percentage value.

slideMargin

The spacing between slides. 
default: 0
accepts: any value as a percentage of the slippry_box (viewport).

transClass

The class applied to the slide element when a transition is in progress. 
default: 'transition'
accepts: Any string that is valid as a class in CSS.

speed

The time the transition takes to complete. 
default: 800
accepts: any number (in milliseconds).

easing

The easing effect to use for the selected transition. 
default: 'swing'
accepts: any easing effect. See "http://jqueryui.com/resources/demos/effect/easing.html".

continuous

Whether the slider should run continuously (seamless transition between the first and last slides). 
default: true
accepts: true, false

useCSS

Whether the slider should use CSS transitions. If the user's browser doesn't support CSS transitions the slider will fallback to jQuery. 
default: true
accepts: true, false

slideshow

auto

Whether the slider should run automatically on load. 
default: true
accepts: true, false

autoDirection

Which direction the slider should move in if in auto mode. 
default: 'next'
accepts: 'next', 'prev'

autoHover

Whether the slideshow should pause automatically on hover. 
default: true
accepts: true, false

autoHoverDelay

The delay (if any) before the slider resumes automatically after hover. 
default: 100
accepts: any number (in milliseconds).

autoDelay

The delay (if any) before the slider runs automatically on load. 
default: 500
accepts: any number (in milliseconds).

pause

The time a slide lasts. 
default: 3000
accepts: any number (in milliseconds).

callback functions

onSliderLoad

Runs when the slider has loaded. 
default: function (index) {
  return this;
},
accepts: any valid function.

onSlideBefore

Runs before the slide transition starts. 
default: function (slide, old_index, new_index) {
  return this;
},
accepts: any valid function.

onSlideAfter

Runs after the slide transition has completed. 
default: function (slide, old_index, new_index) {
  return this;
}
accepts: any valid function.

public functions

getCurrentSlide

Returns the jQuery object of the current slide; 
el.getCurrentSlide();

getSlideCount

Returns the number of slides; 
el.getSlideCount();

goToSlide

Goes to #slide. 
el.goToSlide(slide);

goToNextSlide

Goes to next slide. 
el.goToNextSlide();

goToPrevSlide

Goes to previous slide. 
el.goToPrevSlide();

startAuto

Starts the automatic slide changes. 
el.startAuto();

stopAuto

Stops the automatic slide changes. 
el.stopAuto();

refresh

Re-initialises the already initialised slider.
Useful when adding slides dynamically. 
el.refresh();

destroySlider

Destroys the Slippry slider and puts the original markup back. 
el.destroySlider();

reloadSlider

Destroys the Slippry slider and initialises it again. 
el.reloadSlider();