С задачей справился.
Все оказалось проще чем казалось.
Заменил опцию:
$("ul.slider").bxSlider({
pagerCustom: '#pager'
});
на:
$("ul.slider").bxSlider({
pagerCustom: '.pager'
});
Теперь на странице стало возможно сделать два пейджинг-блока с одинаковым классом
pager с разным оформлением.
<div class="pager first">
<a data-slide-index="0" href="#" title="">1</a>
<a data-slide-index="1" href="#" title="">2</a>
<a data-slide-index="2" href="#" title="">3</a>
</div>
<ul class="pager second">
<li><a data-slide-index="0" href="#" title="">One</a></li>
<li><a data-slide-index="1" href="#" title="">Two</a></li>
<li><a data-slide-index="2" href="#" title="">Three</a></li>
</ul>