Custom Pager

Overview

Note that the parent element (#custom-pager in this example), must contain an href tag for each slide. Each href tag must have a data-slide-index attribute that references the respecitve slide index (zero-based). See the HTML in this example. Also note that this method should not be used for dynamic carousels.

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