thumbnail pager

JS
HTML

            // Can also be used with $(document).ready()
            $(document).ready(function(){
				$('.bxslider').bxSlider({
					auto:true,
					slideWidth:900,
					pagerCustom: '#bx-pager',
					captions:true
				});
			});

            <!-- Place somewhere in the <body> of your page -->
            <ul class="bxslider">
              <ul>
                <li>
                  <img src="slide1.jpg" title="Find the perfect hairstyle..."  />
                </li>
                <li>
                  <img src="slide2.jpg" title="The latest hairstyles and..." />
                </li>
                <li>
                  <img src="slide3.jpg" title="If you are looking for..." />
                </li>
                <li>
                  <img src="slide4.jpg" title="The bodycon dress is..." />
                </li>
              </ul>
				<div id="bx-pager">
					<a data-slide-index="0" href=""></a>
					<a data-slide-index="1" href=""> <img src="images/thumbs/slide2.jpg" /></a>
					<a data-slide-index="2" href=""> <img src="images/thumbs/slide3.jpg" /></a>
					<a data-slide-index="3" href=""> <img src="images/thumbs/slide4.jpg" /></a>
				</div>