Plugin options

Attention: Since 0.8.0 the data-speed attribute is replaced by data-time.

'slideTransition' : 'none', // default slide transition
'slideTransitionSpeed' : 2000, // default slide transition time
'slideEndAnimation' : true, // if set true, objects will transition out before next slide moves in     
'position' : '0,0', // default position | should never be used
'transitionIn' : 'left', // default in - transition
'transitionOut' : 'left', // default out - transition
'fullWidth' : false, // transition over the full width of the window
'delay' : 0, // default delay for elements
'timeout' : 2000, // default timeout before switching slides
'speedIn' : 2500, // default in - transition speed
'speedOut' : 1000, // default out - transition speed
'easeIn' : 'easeOutExpo', // default easing in
'easeOut' : 'easeOutCubic', // default easing out

'controls' : false, // controls on/off
'pager' : false, // pager inside of the slider on/off OR $('someselector') for a pager outside of the slider
'autoChange' : true, // auto change slides
'pauseOnHover' : false, // Pauses slider on hover (current step will still be completed)

'backgroundAnimation' : false, // background animation
'backgroundElement' : null, // element to animate | default fractionSlider element
'backgroundX' : 500, // background animation x distance
'backgroundY' : 500, // background animation y distance
'backgroundSpeed' : 2500, // default background animation speed
'backgroundEase' : 'easeOutCubic', // default background animation easing

'responsive' : false, // responsive slider (see below for some implementation tipps)
'increase' : false, // if set, slider is allowed to get bigger than basic dimensions
'dimensions' : '1000, 400',
if you use the responsive option, you have to set dimensions to the origin (width,height) in px
you use for data-position,heights of elements, etc. */

'startCallback' : null, // callbacks, see below for more information on callbacks
'startNextSlideCallback' : null,
'stopCallback' : null,
'pauseCallback' : null,
'resumeCallback' : null,
'nextSlideCallback' : null,
'prevSlideCallback' : null,
'pagerCallback' : null



How to: Responsive

If you want the slider to be responsive, please read the following instuctions:

  • give the element on which you call the plugin a exact width or 100% and height: auto
  • if you use text set the line-height for elements inside the slider to 100%
  • set paddings and margins in % not in px



The callback functions will be called, after an event happened. E.g. the pauseCallback function will be called every time the slider pauses.


'pauseCallback': function(el, currentSlide, lastSlide, step ){
  // your custom code
  /* paramters:
  el = the slider element
  currentSlide = the current slide (in case of nextSlideCallback etc. its the new slide)
  lastSlide = the last/previouse slide
  step = the current step



  1. Hi there,

    I’m quite confuse with your instruction for the responsive slides. The ‘dimensions’ option is for the slider and not for the slides elements. Is that right? Unfortunately the How to: Responsive is not clear with its instructions. Would be great to have a special demo for the responsive slider.


  2. Hi Castle,

    Sorry for the confusion, i hope this explanation is better:

    You set the position of elements with data-position, which takes the values in px. In order to make the slider responsive you have to tell it, on what slider-dimensions this values relate to.

    E.g. You design a slider which original size is 1000px wide and 400px high – according to this values you set the data-position attribute of the slider-elements. If you want it to be responsive you have to set dimension to “1000,400″, then the slider will scale correctly.

    I´ll try to enhance the “How to: Responsive” section and make it easier to understand.

  3. Hi
    Thanks for the wonderful plugin
    I have a problem with data-out does not work.
    What’s missing??!!

  4. Hi Mario,

    really great work, your plugin! I’m building a new Site and I’ll try to use it…

    BUT: I’m missing “PAUSE” and “STOP”… E.g. when I build in an video-object like I need a pause, when playing…

    Greetings from the sunny north (Hamburg)

    • Hey, the missing pause/stop and replay functions are a good point – i also thought about them, but sadly i wasn’t able to put them in the last release. But I´m going to include it in the next version.

      greetings from stuttgart ;)

  5. Hallo,

    ich habe eine kurze Frage. Ist es irgendwie möglich, wenn das erste Slide verschwindet, gleichzeitig das nächste ‘reinzuschieben’, so dass man nie den Hintergrund sieht?

    Hoffe ich habe nur etwas übersehen und man kann das irgendwo einstellen.

    Lieben Gruß :)

    • Hey, wenn du für jedes slide einen Hintergrund definierst (entweder per css oder ein vollflächiger container mit einem data-fixed attribute) sollte der normale Hintergrund während nem slide Wechsel nicht zu sehen sein.

Kommentare geschloßen