Bxslider plugin does not show thumbnail

Question

I’m using the Bxslider plugin to make a carousel with thumbnails, only I’ve tried everything and the thumbnails do not appear on any list. The images come from the database, but even swapped the images for a simple text 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 you’re like this:

    $('.bxslider').bxSlider({
    adaptiveHeight: false,
    controls : true,
    pagerCustom: '#bx-pager',
    mode: 'fade'
});

Can someone give me a hand?

Answer 1

The problem is that pagerCustom not for use with dynamic carousels:

[...] Not for use with Dynamic Carousels.

And also that the Pager does not match the number of slides, but the number of pages. One option is to use 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>

---

Since you are pulling images from the BD via, one option is to create a JS object in the loop while (untested):

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

And in the buildPager:

var img_pager = pager_images[slideIndex];

Answer 2

Have you tried structuring with <ul> and <li>? And I would use class bxslider in <ul>