You must include the jQuery library. The simpliest way is to include it from a CDN. See for a complete list of available versions.

Next, download the package from this site and link the mbSlider CSS file (for the theme) and the mbSlider Javascript file.

    <!-- jQuery library -->
    <script   src=""
    <!-- mbSlider Javascript file -->
    <script src="/mbslider/jquery.mbslider.min.js"></script>
    <!-- mbSlider CSS file -->
    <link href="/mbslider/jquery.mbslider.css" rel="stylesheet" />

Create a <ul class="mbslider"> element, with a <li> for each slide. Slides can contain images, video, or any other HTML content!

<ul class="mbslider">
  <li><img src="/images/pic1.jpg" /></li>
  <li><img src="/images/pic2.jpg" /></li>
  <li><img src="/images/pic3.jpg" /></li>
  <li><img src="/images/pic4.jpg" /></li>

Call .mbSlider() on <ul class="mbslider">. Note that the call must be made inside of a $(document).ready() call, or the plugin will not work!


Note:  As an alternative to the unordered list you may use a structure of nested <div> elements:

<div class="mbslider">
  <div><img src="/images/pic1.jpg" /></div>
  <div><img src="/images/pic2.jpg" /></div>
  <div><img src="/images/pic3.jpg" /></div>
  <div><img src="/images/pic4.jpg" /></div>

If you are using <ul> alterntive remember to add mbslider class that remove from <li> children bullets or other list styles..

Adding animations

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">


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">


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">

Slide show Example

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


<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 class="col-sm-9">
            <li class="h2 animated delayIn1000 delayOut2000 bounceInRight hingeOut">
              <big>Define timing for every slide</big>
            <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>
  <li id='slide_3' data-pauseAfterIn="4000" data-pauseBeforeOut="5000" data-pause="5000">
    <div class="container">
      <div class="row">
        <div class="col-sm-9">
            <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>
        <div class="col-sm-3">
          <img alt="" class="img-responsive center-block animated rollInRight rollOutLeft delayOut3500 flippedY" src="assets/img/conte-scontornato-rotated.png" />


  $(function() {
    var 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.
        }, 2000);
Torna all'inizio