Riferimento

Impostazioni generali

Opzioni di configurazione generali

mode Tipo di transizione tra le diapositive. Solo usato quando customAnimation: false

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

speed Durata della transizione (in ms). Solo usato quando customAnimation: false

default: 500
options: integer

slideMargin Margine tra ogni diapositiva

default: 0
options: integer

startSlide Indice della diapositiva iniziale (in base zero)

default: 0
options: integer

randomStart Avvia lo slider da una diapositiva casuale

default: false
options: boolean (true / false)

slideSelector Selettore jQuery da utilizzare come slide (es. 'div.slide' ).
Nota: per impostazione predefinita, mbSlider utilizzerà come slide i figli diretti dell'elemento slider ('> *')

default: ''
options: jQuery selector

infiniteLoop Se true , facendo clic su next, mentre è attiva l'ultima diapositiva si passerà alla prima e viceversa

default: true
options: boolean (true / false)

hideControlOnEnd Se true , i controlli prev e next saranno disabilitati (verrà aggiunte una classe disabled) quando la diapositiva corrente è la primo o l'ultima
Nota: Utilizzato solo quandoinfiniteLoop: false

default: false
options: boolean (true / false)

easing Il tipo di easing da utilizzare durante le transizioni. Se usando le transizioni CSS, includere un valore per l'opzione di configurazione transition-timing-function. Se non si utilizzano transizioni CSS , includi plugins/jquery.easing.1.3.js.
Vedi http://gsgd.co.uk/sandbox/jquery/easing/ per più informazioni.

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 Aggiungi didascalie alle slide. Il testo delle didascalie è ricavato dall'attributo title dell'immagine contenuta nella slide.

default: false
options: boolean (true / false)

captionsCustomClass Aggiunge  alle didascalie un classe personalizzata. 

default: ""
options: string

ticker Utilizza lo slider in modalità ticker (simile a un news ticker)

default: false
options: boolean (true / false)

tickerHover Il movimento del ticker verrà sospeso quando il mouse passa sopra il cursore. Nota: questa funzionalità non funziona se utilizzano transizioni CSS!

default: false
options: boolean (true / false)

adaptiveHeight Regola dinamicamente l'altezza dello slider in base all'altezza di ogni diapositiva

default: false
options: boolean (true / false)

adaptiveHeightSpeed Durata della transizione di adattamento dell'altezza dello slider (in ms). Nota: utilizzare solo se adaptiveHeight: true

default: 500
options: integer

video Se le diapositive contengono video, impostare questo a true . Inoltre, includereplugins/jquery.fitvids.js
Vedi http://fitvidsjs.com/ per più informazioni

default: false
options: boolean (true / false)

responsive Abilitare o disabilitare il ridimensionamento automatico dello slider. Utile se è si vogliono utilizzare slider a larghezza fissa.

default: true
options: boolean (true /false)

useCSS Se true,verranno utilizzate le transizioni CSS per le animazioni di scorrimento orizzontale e verticale (più efficiente per i browser che le supportano). Se è false, verrà utilizzato jQuery animate().

default: true
options: boolean (true / false)

preloadImages Se 'all', precarica tutte le immagini prima di avviare il dispositivo di scorrimento. Se 'visibile', precarica solo immagini nelle diapositive inizialmente visibile prima di avviare il dispositivo di scorrimento (Suggerimento: usa 'visibile' se tutte le diapositive hanno le stesse dimensionii)

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

touchEnabled Se true , cursore permetterà l'effetto tocco e trascinamento

default: true
options: boolean (true / false)

swipeThreshold Quantità di pixel che un dito tocco deve superare per poter eseguire una transizione. Nota: utilizzare solo se touchEnabled: true

default: 50
options: integer

oneToOneTouch Se true , le diapositive seguono il dito durante il trascinamento (non funziona se si usa mode: 'fade')

default: true
options: boolean (true / false)

preventDefaultSwipeX Se true , verrà impedito il movimento dello schermo lungo l'asse x

default: true
options: boolean (true / false)

preventDefaultSwipeY Se true , verrà impedito il movimento dello schermo lungo l'asse y

default: false
options: boolean (true / false)

wrapperClass Classe assegnata all'elemento che racchiude lo slider. 

default: 'mb-wrapper'
options: string

Pager

Opzioni di configurazione per il pager

pager Se true , verrà aggiunto un pager (barra di navigazione che consente di saltare alle singole slide)

default: true
options: boolean (true / false)

pagerType Se 'full' , verrà generato un link per ogni diapositiva. Se 'short' , verrà creato un pager x / y  (es. 1 / 5)

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

pagerShortSeparator Se pagerType: 'short' , ilpager utilizzerà questo valore come carattere di separazione

default: ' / '
options: string

pagerSelector Elemento utilizzato per popolare il pager. Per impostazione predefinita, il pager viene aggiunto alla .mb-viewport

default: ''
options: jQuery selector

pagerCustom Elemento che viene utilizzato come pager personalizzato. L'elemento deve contenere un elemento <a data-slide-index="x"> per ogni diapositiva. Vedere l'esempio qui . Non utilizzabile con caroselli dinamici.

default: null
options: jQuery selector

buildPager Se fornito, viene chiamata la funzione su ogni elemento della diapositiva, e il valore restituito viene utilizzato come tag dell'elemento pager.

default: null
options: function(slideIndex)

Controlli

Opzioni di configurazione per i pulsanti di controllo

controls Se true ,verranno aggiunti i controlli  next e prev

default: true
options: boolean (true / false)

nextText Testo da utilizzare per il controllo next

default: 'Next'
options: string

prevText Testo da utilizzare per il controllo prev

default: 'Prev'
options: string

nextSelector Elemento utilizzato per popolare il controllo next

default: null
options: jQuery selector

prevSelector Elemento utilizzato per popolare il controllo prev

default: null
options: jQuery selector

autoControls Se true , verranno aggiunti i controlli start e stop

default: false
options: boolean (true / false)

startText Testo da utilizzare per il controllo start 

default: 'Start'
options: string

stopText Testo da utilizzare per il controllo stop

default: 'Stop'
options: string

autoControlsCombine Quando la presentazione è in corso viene visualizzato solo il controllo stop e viceversa

default: false
options: boolean (true / false)

autoControlsSelector Elemento utilizzato per popolare i controlli auto

default: null
options: jQuery selector

keyboardEnabled Abilita la navigazione da tastiera

default: false
options: boolean (true / false)

Animazioni personalizzate

customAnimation
Se è impostato su 'static' o 'slide' le transizioni in entrata e in uscita delle diapositive devono essere gestite animando gli elementi contenuti in ogni singola diapositiva. Se customAnimation: 'static' , le diapositive non sono rimosse dalla viewport dello slider. Ritardando la transizione in uscita si può eseguire la transizione alla slide successiva sopra la vecchia slide (Vedi esempi). Se customAnimation: 'slide' le diapositive sono invece rimosse dalla vieport. Ogni transizione in entrata è parte dallo schermo vuoto e ogni transizione in uscita è verso lo schermo vuoto (vedi esempio). Se customAnimation: false le transizioni tra le diapositive sono gestite da mbSlider e pauseBeforeOut e pauseAfterIn  vengono ignorati.

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

pauseBeforeOut
Pausa prima di passare alla diapositiva successiva. Consente il completamento dell'animazione in uscita della diapositiva corrente prima di inserire la diapositiva successiva. Tempo di attesa predefinito che può essere modificata dall'impostazione della singola slide. Funziona sia in modalità automatica che in modalità manuale.

default: 1000
options: integer

pauseAfterIn
Pausa dopo l'inizio della transizione in entrata. Consente di calcolare il tempo di attesa per il completamento della transizione in entrata senza interferire sul tempo di lettura della slide Impostazione predefinita del tempo di attesa che può essere modificato dall'impostazione della singola slide. Funziona sia in modalità automatica che in modalità manuale.

default: 0
options: integer

Auto

auto Slide show automatico

default: false
options: boolean (true / false)

stopAutoOnClick Lo slide show automatico viene sospeso dall'interazione con i controlli

default: false
options: boolean (true / false)

pause La quantità di tempo (in millisecondi) tra una trasizione e l'altra

default: 4000
options: integer

autoStart Lo slide show automatico inizia immediatamente. Se false , lo slide show verrà avviato quando si fa clic sul "Start"

default: true
options: boolean (true / false)

autoDirection Direzione dello slide show automatico

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

autoHover Lo slide show automatico verrà sospesa quando il mouse passa sopra lo slider

default: false
options: boolean (true / false)

autoDelay Pausa prima che inizi lo slide show automatico

default: 0
options: integer

Tastiera

keyboardEnabled Permette il controllo da tastiera di uno slider visibile. L'evento KeyPress viene ignorato se lo slider non è visibile.

default: false
options: boolean (true / false)

Accessibilità

ariaLive Aggiunge attributi Aria Live allo slider

default: true
options: boolean (true / false)

ariaHidden Aggiunge l'attributo Aria Hidden a tutte le diapositive non visibili.

default: true
options: boolean (true / false)

Callback

onSliderLoad Viene eseguito immediatamente dopo che lo slider è completamente caricato

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

onSliderResize Viene eseguito immediatamente dopo che lo slider viene ridimensionato

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

onSlideBefore Viene eseguito immediatamente prima di ogni transizione.

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 Viene eseguito immediatamente dopo ogni transizione. Argomento della funzione è l'elemento della diapositiva corrente (quando viene completata la transizione).

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 Viene eseguito immediatamente prima di ogni tansizione a next . Argomento della funzione è ll'elemento della diapositiva di destinazione.

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 Viene eseguito immediatamente prima di ogni transizione a prev. Argomento della funzione è l'elemento della diapositiva di destinazione (prev).

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)

Metodi pubblici

goToSlide Va ad una diapositiva in base all'indice (in base zero)

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

goToNextSlide Va alla dispositiva successiva

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

goToPrevSlide Va alla dispositiva precedente

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

startAuto Inizia lo slide show automatico Se si passa false come parametro i controlli start e stop non verranno aggiornati automaticamente.

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

stopAuto Ferma lo slide show automatico. Se si passa false come parametro i controlli start e stop non verranno aggiornati automaticamente.

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

getCurrentSlide Restituisce la diapositiva attiva corrente

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

getSlideCount Restituisce il numero totale di diapositive nello slider

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

redrawSlider Ridisegnare lo slider. Utile quando è necessario ridisegnare uno slider nascosto che viene visualizzato.

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

reloadSlider Ricaricare il dispositivo di scorrimento. Utile quando si aggiungono diapositive al volo. 

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

destroySlider Distruggere lo slider. Questo metodo ripristina tutti gli elementi al loro stato originale..

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

Aggiunta di animazioni

È possibile animare ogni elemento HTML all'interno di una slide semplicemente assegnandogli alcune classi.

Classe generale

Ad ogni elemento animato è necessario assegnare la classe animated . 

Classi di animazione

Quindi è necessario:

  • Assegnare una classe che definisce l'animazione in entrata dell'elemento. Le classi di animazione in entrata hanno il suffisso o l'infisso "In"  (come in fadeIn , flipInX , rotateIn , slideInUp , ecc.).
  • Assegnare una classe che definisce l'animazione in uscita dell'elemento. Le classi di animazione in uscita hanno il suffisso o l'infisso "Out" (come in fadeOut , flipOutX , rotateOut , slideOutUp , ecc.)
  • Infine, se necessario, è possibile modificare la velocità e il ritardo delle animazioni.

Classi che definiscono animazioni in entrata: 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

Classi che definiscono animazioni in uscita: 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

Ritardo e modifica della velocità delle animazioni

  • Ritardo : È possibile utilizzare le classi delayInXXXX e delayOutXXXX (dove XXXX è 500, 1000, 1500, 2000, 2500, 3000, 3500, 4000, 4500 o 5000) per ritardare l'animazione e/o creare sequenze temporizzate di animazioni.
  • Velocità : Le animazioni hanno una velocità base di 1 secondo. È possibile modificare la velocità di animazione utilizzando le classi slowIn, slowOut, fastIn, fastOut, xslowIn, xslowOut.

Temporizzazione di singole diapositive

È possibile personalizzare i tempi delle singole slide utilizzando alcuni attributi data-.

data-pause La quantità di tempo in cui la slide rimane sulla schermo prima di iniziare la transizioni in uscita. Se impostato viene utilizzato invece del valore assegnato all'opzione di configurazione pause.

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

data-pauseBeforeOut Tempo che consente il completamento dell'animazione in uscita prima di inserire la diapositiva successiva. Funziona sia in modalità automatica che in modalità manuale. Esegue l'override all'opzione di configurazione pauseBeforeOut.

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

data-pauseAfterIn Tempo che consente il completamento dell'animazione in entrata. Per ogni diapositiva si può definire una tempo per il completamento dell'animazione un una tempo per la lettura dei contenuti. Funziona sia in modalità automatica che in modalità manuale. Esegue l'override all'opzione di configurazione pauseAfterIn.

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

Esempio di presentazione animata

Ecco il codice della presentazione sulla home page del sito.

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>
Torna all'inizio