Thumbnail pager - method 2

JS:

$('.bxslider').bxSlider({
  buildPager: function(slideIndex){
    switch(slideIndex){
      case 0:
        return '';
      case 1:
        return '';
      case 2:
        return '';
    }
  }
});

HTML:

<style type="text/css">
  .bx-wrapper .bx-pager {
    bottom: -95px;
  }
  
  .bx-wrapper .bx-pager a {
    border: solid #ccc 1px;
    display: block;
    margin: 0 5px;
    padding: 3px;
  }
  
  .bx-wrapper .bx-pager a:hover,
  .bx-wrapper .bx-pager a.active {
    border: solid #5280DD 1px;
  }
  
  .bx-wrapper {
    margin-bottom: 120px;
  }
</style>

<ul class="bxslider">
  <li><img src="/images/730_200/tree_root.jpg" /></li>
  <li><img src="/images/730_200/houses.jpg" /></li>
  <li><img src="/images/730_200/hill_fence.jpg" /></li>
</ul>

Note that if the supplied theme is being used, some CSS must be tweaked (see the HTML code above). CSS should always be implemented in an external CSS stylesheet, not the body of your document.

Add sliders to any website
with just two lines of code
Check out sliderui.com!