Question:
I'm using the Bxslider plugin to make a carousel with thumbnails, but I've tried everything and the thumbnails don't show up at all. The images come from the bank, but even if the images are replaced by a simple text, it does not appear. The html * php code is this:
<div id="bx-pager">
<?php
while ($img = mysql_fetch_array($query_fotos)) {
?>
<a data-slide-index="<?php echo $i; ?>" href=""><img src="album/thumb/<?php echo $img['foto'] ?>" /></a>
<?php
$i++;
}
?>
</div>
And js is like this:
$('.bxslider').bxSlider({
adaptiveHeight: false,
controls : true,
pagerCustom: '#bx-pager',
mode: 'fade'
});
Can anyone give me a hand?
Answer:
The problem is that pagerCustom is not for use with dynamic carousels:
[…] Not for use with dynamic carousels.
Also, the Pager does not correspond to the number of slides, but the number of pages. One option is to use the buildPager callback :
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"/>
<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>Since you are pulling images from the BD via, one option is to create a JS object in the while loop (not tested):
<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];