javascriptjquerysliderbxsliderjquery-ui-slider

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


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?


Solution

  • 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>';
        }
      }
    });