O problema é que pagerCustom
não é para uso com carrosséis dinâmicos:
[...] Not for use with dynamic carousels.
E também que o Pager não corresponde ao número de slides, mas ao número de páginas. Uma opção é usar o callback buildPager
:
buildPager: function ( slideIndex ) {
var img_pager = 'http://dummyimage.com/50x50/aaa/fff&text=' + (slideIndex + 1);
return '<img class="img-pager" src="' + img_pager + '" />';
}
$('.bxslider').bxSlider({
slideWidth: 300,
minSlides: 3,
maxSlides: 3,
moveSlides: 3,
slideMargin: 10,
pager: true,
pagerType: 'full',
buildPager: function (slideIndex) {
var img_pager = 'http://dummyimage.com/25x25/aaa/fff&text=' + (slideIndex + 1);
return '<img class="img-pager" src="' + img_pager + '" />';
}
});
.bx-pager-item {
margin: 0 5px;
}
.bx-wrapper .bx-pager, .bx-wrapper .bx-controls-auto {
bottom: -40px !important; /* só aqui no stacksnippet */
}
<link href="https://cdn.rawgit.com/stevenwanderski/bxslider-4/master/jquery.bxslider.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/stevenwanderski/bxslider-4/master/jquery.bxslider.min.js"></script>
<div class="bxslider">
<div class="slide">
<img src="http://placehold.it/300x150&text=FooBar1" />
</div>
<div class="slide">
<img src="http://placehold.it/300x150&text=FooBar2" />
</div>
<div class="slide">
<img src="http://placehold.it/300x150&text=FooBar3" />
</div>
<div class="slide">
<img src="http://placehold.it/300x150&text=FooBar4" />
</div>
<div class="slide">
<img src="http://placehold.it/300x150&text=FooBar5" />
</div>
<div class="slide">
<img src="http://placehold.it/300x150&text=FooBar6" />
</div>
<div class="slide">
<img src="http://placehold.it/300x150&text=FooBar7" />
</div>
<div class="slide">
<img src="http://placehold.it/300x150&text=FooBar8" />
</div>
<div class="slide">
<img src="http://placehold.it/300x150&text=FooBar9" />
</div>
<div class="slide">
<img src="http://placehold.it/300x150&text=FooBar10" />
</div>
</div>
Já que está puxando imagens do BD via, uma opção é criar um objeto JS no loop while
(não testado):
<script> var pager_images = [
<?php
$i = 0;
while ( $img = mysql_fetch_array($query_fotos) ) {
if( $i % 3 == 0 ) { // imprime 1x a cada 3 passagens do loop
echo "'" . $img['foto'] . "', "; // IMPRIME 'http://url-da-foto',
}
$i++;
}
?>
];
</script>
E no buildPager
:
var img_pager = pager_images[slideIndex];
bx-pager
. Tente algo como<div class="bx-pager"><span><?php
.