В html-верх

<script src="https://raw.github.com/wandoledzep/bxslider/master/jquery.bxSlider.min.js"></script>
<style>
#slider #main { height: 200px; width: 700px; }
#slider .bx-window { border: 1px solid black; }
#slider a.pager-link, #slider a.bx-prev, #slider a.bx-next, #slider a.bx-start { display: inline-block; pointer: cursor; margin: 0 5px; width: 30px; height: 25px; padding-#slider top: 5px; border-radius: 15px; background: #374C64; font: normal 13px Verdana; color: whitesmoke; text-decoration: none; }
#slider a.pager-link.pager-active { background: #44678E; cursor: auto; } #slider a.pager-link:hover, a.bx-prev:hover, a.bx-next:hover, #slider a.pager-start:hover { background: #6289B4; }
</style>

Туда, куда надо.

<table id="slider"><tr><td id="prev"></td>
<td><div id="main">
  <div>Slide one content</div>
  <div>Slide two content</div>
  <div>Slide three content</div>
  <div>And so on...</div>
</div></td>
<td id="next"></td>
</tr><tr><td colspan='3' id="pager"></td></tr><tr><td colspan='3' id="autos"></td></tr></table>

<script>
$('#slider #main').bxSlider({ prevSelector: '#slider #prev', prevText: '<', nextSelector: '#slider #next', nextText: '>', pager: true, pagerSelector: '#slider #pager', auto: true, autoControls: true, autoControlsSelector: '#slider #autos', startText: '\u25B6', stopText: '\u25A0', pause: 3000 });
</script>

Если не нужен счётчик, то голубое можно удалить.
Красное - период смены контента.