Thumbnail pager - method 1

    pagerCustom: '#bx-pager'
<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 img {
    border: solid #5280DD 1px;

<ul class="bxslider">
  <li><img src="" /></li>
  <li><img src="" /></li>
  <li><img src="" /></li>

<div id="bx-pager">
  <a data-slide-index="0" href=""><img src="" /></a>
  <a data-slide-index="1" href=""><img src="" /></a>
  <a data-slide-index="2" href=""><img src="" /></a>
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.


  1. Image gallery with captions
  2. Auto show with start / stop controls
  3. Manual show without infinite loop
  4. Slidehow using adaptiveHeight
  5. Carousels demystified - in depth explanation with examples
  6. Carousel - static number of slides showing
  7. Carousel - dynamic number of slides showing
  8. Thumbnail pager - method 1
  9. Thumbnail pager - method 2
  10. Vertical slideshow
  11. Custom next / prev control selectors
  12. Multiple slideshows
  13. Callback API
  14. Public methods
  15. Ticker
Coded with ♥ by
Steven Wanderski Chicago Web Developer