Reference

mode Type of transition between slides. Only used when customAnimation: false 

default: 'horizontal'
options: 'horizontal', 'vertical', 'fade'

speed Slide transition duration (in ms). Only used when customAnimation: false 

default: 500
options: integer

slideMargin Margin between each slide

default: 0
options: integer

startSlide Starting slide index (zero-based)

default: 0
options: integer

randomStart Start slider on a random slide

default: false
options: boolean (true / false)

slideSelector Element to use as slides (ex. 'div.slide').
Note: by default, mbSlider will use all immediate children of the slider element

default: ''
options: jQuery selector

infiniteLoop If true, clicking "Next" while on the last slide will transition to the first slide and vice-versa

default: true
options: boolean (true / false)

hideControlOnEnd If true, "Prev" and "Next" controls will receive a class disabled when slide is the first or the last
Note: Only used when infiniteLoop: false

default: false
options: boolean (true / false)

easing The type of "easing" to use during transitions. If using CSS transitions, include a value for the transition-timing-function property. If not using CSS transitions, you may include plugins/jquery.easing.1.3.js for many options.
See http://gsgd.co.uk/sandbox/jquery/easing/ for more info.

default: null
options: if using CSS: 'linear', 'ease', 'ease-in', 'ease-out', 'ease-in-out', 'cubic-bezier(n,n,n,n)'. If not using CSS: 'swing', 'linear' (see the above file for more options)

captions Include image captions. Captions are derived from the image's title attribute

default: false
options: boolean (true / false)

captionsCustomClass Add custom class to captions.

default: ""
options: string

ticker Use slider in ticker mode (similar to a news ticker)

default: false
options: boolean (true / false)

tickerHover Ticker will pause when mouse hovers over slider. Note: this functionality does NOT work if using CSS transitions!

default: false
options: boolean (true / false)

adaptiveHeight Dynamically adjust slider height based on each slide's height

default: false
options: boolean (true / false)

adaptiveHeightSpeed Slide height transition duration (in ms). Note: only used if adaptiveHeight: true

default: 500
options: integer

video If any slides contain video, set this to true. Also, include plugins/jquery.fitvids.js
See http://fitvidsjs.com/ for more info

default: false
options: boolean (true / false)

responsive Enable or disable auto resize of the slider. Useful if you need to use fixed width sliders.

default: true
options: boolean (true /false)

useCSS If true, CSS transitions will be used for horizontal and vertical slide animations (this uses native hardware acceleration). If false, jQuery animate() will be used.

default: true
options: boolean (true / false)

preloadImages If 'all', preloads all images before starting the slider. If 'visible', preloads only images in the initially visible slides before starting the slider (tip: use 'visible' if all slides are identical dimensions)

default: 'visible'
options: 'all', 'visible'

touchEnabled If true, slider will allow touch swipe transitions

default: true
options: boolean (true / false)

swipeThreshold Amount of pixels a touch swipe needs to exceed in order to execute a slide transition. Note: only used if touchEnabled: true

default: 50
options: integer

oneToOneTouch If true, non-fade slides follow the finger as it swipes

default: true
options: boolean (true / false)

preventDefaultSwipeX If true, touch screen will not move along the x-axis as the finger swipes

default: true
options: boolean (true / false)

preventDefaultSwipeY If true, touch screen will not move along the y-axis as the finger swipes

default: false
options: boolean (true / false)

wrapperClass Class to wrap the slider in. Change to prevent from using default mbSlider styles.

default: 'mb-wrapper'
options: string

pager If true, a pager will be added

default: true
options: boolean (true / false)

pagerType If 'full', a pager link will be generated for each slide. If 'short', a x / y pager will be used (ex. 1 / 5)

default: 'full'
options: 'full', 'short'

pagerShortSeparator If pagerType: 'short', pager will use this value as the separating character

default: ' / '
options: string

pagerSelector Element used to populate the populate the pager. By default, the pager is appended to the .mb-viewport

default: ''
options: jQuery selector

pagerCustom Parent element to be used as the pager. Parent element must contain a <a data-slide-index="x"> element for each slide. See example here . Not for use with dynamic carousels.

default: null
options: jQuery selector

buildPager If supplied, function is called on every slide element, and the returned value is used as the pager item markup.
See examples for detailed implementation

default: null
options: function(slideIndex)

controls If true, next and prev controls will be added

default: true
options: boolean (true / false)

nextText Text to be used for the next control

default: 'Next'
options: string

prevText Text to be used for the prev control

default: 'Prev'
options: string

nextSelector Element used to populate the next" control

default: null
options: jQuery selector

prevSelector Element used to populate the prev control

default: null
options: jQuery selector

autoControls If true, start and stop controls will be added

default: false
options: boolean (true / false)

startText Text to be used for the start control

default: 'Start'
options: string

stopText Text to be used for the stop control

default: 'Stop'
options: string

autoControlsCombine When slideshow is playing only stop control is displayed and vice-versa

default: false
options: boolean (true / false)

autoControlsSelector Element used to populate the auto controls

default: null
options: jQuery selector

keyboardEnabled Enable keyboard navigation for visible sliders

default: false
options: boolean (true / false)

customAnimation 
If set to 'static' or 'slide' incoming transitions and slide exit must be managed by animating the elements contained in each individual slide. If customAnimation: 'static', the slides are not removed from the viewport of the slider. Delaying the out transition can perform the transition to the next slide over the old slide (see examples). If customAnimation: 'slide' the slides are removed from viewport. Each transition is an incoming from the blank screen and each outgoing transition is toward the blank screen (see example). If customAnimation: false transitions between slides are operated by mbSlider and pauseBeforeOut and pauseAfterIn values are ignored.

default: false
options: boolean or string (false | 'static' | 'slide')

pauseBeforeOut
Pause before slide exit transition (in ms.). It allows out animation completion before the next slide enter. This is the default wait and can be overridden by single slide setting. It works both in auto mode and in manual mode.

default: 1000
options: integer

pauseAfterIn
Pause after slide enter transition (in ms.). For every slide you may define a pause for enter animation completion. This is the default wait and can be overridden by single slide setting. It works both in auto mode and in manual mode.

default: 0
options: integer

auto Slides will automatically transition

default: false
options: boolean (true / false)

stopAutoOnClick Auto will stop on interaction with controls

default: false
options: boolean (true / false)

pause The amount of time (in ms) between each auto transition

default: 4000
options: integer

autoStart Auto show starts playing on load. If false, slideshow will start when the "Start" control is clicked

default: true
options: boolean (true / false)

autoDirection The direction of auto show slide transitions

default: 'next'
options: 'next', 'prev'

autoHover Auto show will pause when mouse hovers over slider

default: false
options: boolean (true / false)

autoDelay Time (in ms) auto show should wait before starting

default: 0
options: integer

minSlides The minimum number of slides to be shown. Slides will be sized down if carousel becomes smaller than the original size.

default: 1
options: integer

maxSlides The maximum number of slides to be shown. Slides will be sized up if carousel becomes larger than the original size.

default: 1
options: integer

moveSlides The number of slides to move on transition. This value must be >= minSlides, and <= maxSlides. If zero (default), the number of fully-visible slides will be used.

default: 0
options: integer

slideWidth The width of each slide. This setting is required for all horizontal carousels!

default: 0
options: integer

shrinkItems The Carousel will only show whole items and shrink the images to fit the viewport based on maxSlides/MinSlides.

default: false
options: boolean (true / false)

keyboardEnabled Allows for keyboard control of visible slider. Keypress ignored if slider not visible.

default: false
options: boolean (true / false)

ariaLive Adds Aria Live attribute to slider.

default: true
options: boolean (true / false)

ariaHidden Adds Aria Hidden attribute to any nonvisible slides.

default: true
options: boolean (true / false)

onSliderLoad Executes immediately after the slider is fully loaded

default: function(){}
options: function(currentIndex){ // your code here }
arguments:
  currentIndex: element index of the current slide

onSliderResize Executes immediately after the slider is resized

default: function(){}
options: function(currentIndex){ // your code here }
arguments:
  currentIndex: element index of the current slide

onSlideBefore Executes immediately before each slide transition.

default: function(){}
options: function($slideElement, oldIndex, newIndex){ // your code here }
arguments:
  $slideElement: jQuery element of the destination element
  oldIndex: element index of the previous slide (before the transition)
  newIndex: element index of the destination slide (after the transition)

onSlideAfter Executes immediately after each slide transition. Function argument is the current slide element (when transition completes).

default: function(){}
options: function($slideElement, oldIndex, newIndex){ // your code here }
arguments:
  $slideElement: jQuery element of the destination element
  oldIndex: element index of the previous slide (before the transition)
  newIndex: element index of the destination slide (after the transition)

onSlideNext Executes immediately before each "Next" slide transition. Function argument is the target (next) slide element.

default: function(){}
options: function($slideElement, oldIndex, newIndex){ // your code here }
arguments:
  $slideElement: jQuery element of the destination element
  oldIndex: element index of the previous slide (before the transition)
  newIndex: element index of the destination slide (after the transition)

onSlidePrev Executes immediately before each "Prev" slide transition. Function argument is the target (prev) slide element.

default: function(){}
options: function($slideElement, oldIndex, newIndex){ // your code here }
arguments:
  $slideElement: jQuery element of the destination element
  oldIndex: element index of the previous slide (before the transition)
  newIndex: element index of the destination slide (after the transition)

goToSlide Performs a slide transition to the supplied slide index (zero-based)

example:
slider = $('.mbslider').mbSlider();
slider.goToSlide(3);

goToNextSlide Performs a "Next" slide transition

example:
slider = $('.mbslider').mbSlider();
slider.goToNextSlide();

goToPrevSlide Performs a "Prev" slide transition

example:
slider = $('.mbslider').mbSlider();
slider.goToPrevSlide();

startAuto Starts the auto show. Provide an argument false to prevent the auto controls from being updated.

example:
slider = $('.mbslider').mbSlider();
slider.startAuto();

stopAuto Stops the auto show. Provide an argument false to prevent the auto controls from being updated.

example:
slider = $('.mbslider').mbSlider();
slider.stopAuto();

getCurrentSlide Returns the current active slide

example:
slider = $('.mbslider').mbSlider();
var current = slider.getCurrentSlide();

getSlideCount Returns the total number of slides in the slider

example:
slider = $('.mbslider').mbSlider();
var slideQty = slider.getSlideCount();

redrawSlider Redraw the slider. Useful when needing to redraw a hidden slider after it is unhidden.

example:
slider = $('.mbslider').mbSlider();
slider.redrawSlider();

reloadSlider Reload the slider. Useful when adding slides on the fly. 

example:
slider = $('.mbslider').mbSlider();
slider.reloadSlider();

destroySlider Destroy the slider. This reverts all slider elements back to their original state (before calling the slider).

example:
slider = $('.mbslider').mbSlider();
slider.destroySlider();

You can animate any single HTML element inside a slide simply assigning to it some classes.

General class

To every animated element you must assign the class animated.This class set general behaviors.

Animation classes

Then you must:

• Assign a class for enter animation. Enter animation classes names have the "In" suffix or infix (like fadeIn, flipInX, rotateIn, slideInUp, etc.).
• Assign a class for exit animation. Exit animation classes have the "Out" suffix or infix (fadeOut, flipOutX , rotateOut , slideOutUp, etc.)
• Finally, if you need, you may modify animations speed and delay.

Available on enter transition classes : fadeIn, fadeInUp, fadeInUpBig, fadeInDown, fadeInDownBig, fadeInLeft, fadeInLeftBig, fadeInRight, fadeInRightBig, bounceIn, bounceInUp, bounceInDown, bounceInLeft, bounceInRight, rotateIn, rotateInBig, rotateInUpLeft, rotateInUpRight, rotateInDownLeft, rotateInDownRight, slideIn, slideInUp, slideInDown, slideInLeft, slideInRight, flipInX, flipOutX, lightSpeedIn, rollIn, rollInRight, zoomIn, zoomInDown, zoomInLeft, zoomInRight, zoomInUp

Available on exit transition classes : fadeOut, fadeOutUp, fadeOutUpBig, fadeOutDown, fadeOutDownBig, fadeOutLeft, fadeOutLeftBig, fadeOutRight, fadeOutRightBig, bounceOut, bounceOutUp, bounceOutDown, bounceOutLeft, bounceOutRight, rotateOut, rotateOutUpLeft, rotateOutUpRight, rotateOutDownLeft, rotateOutDownRight, slideOut, slideOutUp, slideOutDown, slideOutLeft, slideOutRight, flipOutX, flipOutX, lightSpeedOut, hingeOut, rollOut, rollOutLeft, zoomOut, zoomOutDown, zoomOutLeft, zoomOutRight, zoomOutUp

Modifier classes

• Delay : You can use delayInXXXX and delayOutXXXX classes (where XXXX is 500, 1000, 1500, 2000, 2500, 3000, 3500, 4000, 4500, 5000) to delay in and/or out animation and create temporized animation sequences.
• Speed : Animations has a base speed of 1 second. You can modify animation speed using slowIn, slowOut, fastIn, fastOut, xslowIn, xslowOut classes.

Single slides timing

You can customize single slides timing using data- attributes.

data-pause The amount of time (in ms) between each auto transition. Override option pause setting.

<ul class="mbslider">
  <li data-pause="7000">
    .......
  </li>
</ul>

data-pauseBeforeOut

Pause before slide change in milliseconds. It allows out animation completion before the next slide enter. It works both in auto mode and in manual mode. Override option pauseBeforeOut setting.

<ul class="mbslider">
  <li data-pauseBeforeOut="2000">
    .......
  </li>
</ul>

data-pauseAfterIn

Pause added to slide pause in milliseconds. For every slide you may define a pause for in animation completion an a pause for slide reading. It works both in auto mode and in manual mode. Override option pauseAfterIn setting.

<ul class="mbslider">
  <li data-pauseAfterIn="2000">
    .......
  </li>
</ul>

Slide show Example

Here's the code of the slide show you will find on the site home page.

HTML

<ul class="mbslider fade">
  <li id='slide_1'>
    <h1><img alt="" class="img-responsive center-block animated delayOut1000 rotateInBig zoomOut" src="assets/img/LogoMbSlider_l.png" /></h1>
    <h3 class="text-center animated delayIn1000 bounceInRight fadeOutDown">Create animated presentations in minutes!</h3> </li>
  <li id='slide_2' data-pauseAfterIn="4000" data-pauseBeforeOut="5000" data-pause="5000">
    <div class="container">
      <div class="row">
        <div class="col-sm-3">
          <img alt="" class="img-responsive center-block animated rollIn rollOut delayOut3500" src="assets/img/conte-scontornato_L.png" />
        </div>
        <div class="col-sm-9">
          <ul>
            <li class="h2 animated delayIn1000 delayOut2000 bounceInRight hingeOut">
              <big>Define timing for every slide</big>
            </li>
            <li class="h2 animated delayIn1500 delayOut1000 bounceInRight fadeOutDown"><big>Define in and out animations for every HTML element in the slide</big></li>
            <li class="h2 animated delayIn2000 bounceInRight fadeOutDown"><big>Fully responsive - will adapt to any device</big></li>
          </ul>
        </div>
      </div>
    </div>
  </li>
  <li id='slide_3' data-pauseAfterIn="4000" data-pauseBeforeOut="5000" data-pause="5000">
    <div class="container">
      <div class="row">
        <div class="col-sm-9">
          <ul>
            <li class="h2 animated delayIn1000 delayOut2000 bounceInLeft hingeOut"><big>Slides can contain any HTML content</big></li>
            <li class="h2 animated delayIn1500 delayOut1000 bounceInLeft fadeOutDown"><big>Callback API and public methods</big></li>
            <li class="h2 animated delayIn2000 bounceInLeft fadeOutDown"><big>Support Modern Browser with fall back for ie8 and ie9.</big></li>
          </ul>
        </div>
        <div class="col-sm-3">
          <img alt="" class="img-responsive center-block animated rollInRight rollOutLeft delayOut3500 flippedY" src="assets/img/conte-scontornato-rotated.png" />
        </div>
      </div>
    </div>
  </li>
</ul>

JavaScript

<script>
  $(function() {
    var slider = $('.mbslider');
    slider.mbSlider({
      customAnimation: "slide",   // Slide is removed before 
                                  // transition to next slide
      auto: true,                 // Automatic slide show
      pause: 8000,
      pauseBeforeOut: 2000,       // Default pause before out
      pager: false,               // Pager and controls are hidden
      controls: false,
      onSliderLoad: function(currentIndex) {
        setTimeout(function() {
          // Important! Class fade hide slider content
          // I use it to hide slider during initialization
          // and i remove it only whem the slider is ready.
          slider.removeClass('fade');
        }, 2000);
      }
  })
</script>