Pager personalizzato

Panoramica

Si noti che l'elemento che costituisce il pager personalizzato (#custom-pager in questo esempio), deve contenere un tag <a></a> per ogni diapositiva. Ogni tag <a></a> deve avere un attributo data-slide-index che fa riferimento all'indice della diapositiva rispettiva (in base zero). Esamina il codice HTML in questo esempio. Questo metodo non dovrebbe essere usato per slider dinamici.

JS:

$(document).ready(function(){
  $('#demoSlider').mbSlider({
     pagerCustom: '#bx-pager'
  });
});

HTML:

<div id="demoSlider1" class="mbslider">
  <div class="item"><img src="https://unsplash.it/1280/720?image=1061"></div>
  <div class="item"><img src="https://unsplash.it/1280/720?image=1062"></div>
  <div class="item"><img src="https://unsplash.it/1280/720?image=1063"></div>
</div>
<div id="custom-pager">
  <a data-slide-index="0" href=""><img src="https://unsplash.it/40?image=1061" /></a>
  <a data-slide-index="1" href=""><img src="https://unsplash.it/40?image=1062" /></a>
  <a data-slide-index="2" href=""><img src="https://unsplash.it/40?image=1063" /></a>
</div>
Torna all'inizio