(bxslider) Using the slider pager with words instead of circles

Question

Is there a way to replace the circles in a pager for a slider with a word that represents each slide (like a clickable menu that slides the content below it)? The options are here http://bxslider.com/options but not sure which one could accomplish this?

Answer 1

Use buildPager:

If supplied, function is called on every slide element, and the returned value is used as the pager item markup.

Example page is here: http://bxslider.com/examples/thumbnail-pager-2

Your code would look something like this:

$('.bxslider').bxSlider({
  buildPager: function(slideIndex){
    switch(slideIndex){
      case 0:
        return '<div>First slide</div>';
      case 1:
        return '<div>Secoond slide</div>';
      case 2:
        return '<div>Third slide</div>';
    }
  }
});