Thumbnail pager - method 1

JS:

  $('.bxslider').bxSlider({
    pagerCustom: '#bx-pager'
  });

HTML:

<style type="text/css">
  #bx-pager {
    text-align: center;
    margin-top: -30px;
  }

  #bx-pager a {
    margin: 0 3px;
  }

  #bx-pager a img {
    padding: 3px;
    border: solid #ccc 1px
  }

  #bx-pager a.active img {
    border: solid #5280DD 1px;
  }
</style>

<ul class="bxslider">
  <li><img src="https://picsum.photos/id/22/900/200"></li>
  <li><img src="https://picsum.photos/id/23/900/200"></li>
  <li><img src="https://picsum.photos/id/24/900/200"></li>
</ul>

<div id="bx-pager">
  <a data-slide-index="0" href=""><img src="https://picsum.photos/id/22/73/73" /></a>
  <a data-slide-index="1" href=""><img src="https://picsum.photos/id/23/73/73" /></a>
  <a data-slide-index="2" href=""><img src="https://picsum.photos/id/24/73/73" /></a>
</div>

Note that the parent element (#bx-pager in this example), must contain an <a> tag for each slide. Each <a> 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. See here for a method to be used with dynamic carousels.

Thumbnail pager - method 1

Examples