// 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>