Bxslider plugin does not show thumbnail

Question

Bxslider plugin does not show thumbnail

Navigation

#1 by (1 votes)
#2 by (0 votes)

3

I'm using the Bxslider plugin to make a car with thumbnails, but I've tried everything and the thumbnails do not appear in any way. The images come from the bank, but even exchanged 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 js looks like this:

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

Can anyone give me a hand?

php javascript html jquery

asked by anonymous 18.06.2014 / 19:55

2 answers

Receiving value from one method to another - Objective C No input image

score 1 · Answer 1

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

[...] Not for use with dynamic carousels.

And also that 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><scriptsrc="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><divclass="slide">
        <img src="http://placehold.it/300x150&text=FooBar2"/></div><divclass="slide">
        <img src="http://placehold.it/300x150&text=FooBar3"/></div><divclass="slide">
        <img src="http://placehold.it/300x150&text=FooBar4"/></div><divclass="slide">
        <img src="http://placehold.it/300x150&text=FooBar5"/></div><divclass="slide">
        <img src="http://placehold.it/300x150&text=FooBar6"/></div><divclass="slide">
        <img src="http://placehold.it/300x150&text=FooBar7"/></div><divclass="slide">
        <img src="http://placehold.it/300x150&text=FooBar8"/></div><divclass="slide">
        <img src="http://placehold.it/300x150&text=FooBar9"/></div><divclass="slide">
        <img src="http://placehold.it/300x150&text=FooBar10"/></div></div>

SinceyouarepullingimagesfromtheBDvia,oneoptionistocreateaJSobjectinthewhile(untested)loop:

<script>varpager_images=[<?php$i=0;while($img=mysql_fetch_array($query_fotos)){if($i%3==0){//imprime1xacada3passagensdoloopecho"'" . $img['foto'] . "', "; // IMPRIME 'http://url-da-foto', 
        }
        $i++;
    }
    ?>
];
</script>

And no buildPager :

var img_pager = pager_images[slideIndex];

score 0 · Answer 2

0

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

18.06.2014 / 20:26