3

Estou usando o plugin Bxslider para fazer um carrosel com miniaturas, só que já tentei de tudo e as miniaturas não aparecem de mandeira nenhuma. As imagens vem do banco, mas mesmo trocado as imagens por um simples texto não aparece. O codigo html * php é esse:

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

E o js está assim:

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

Alguém pode me dar uma ajuda?

2
  • A melhor dica que posso te dar é pra procurar outro plugin, o bx slider da muito problema, ele é muito instável, usar ele significa ir dormir com a animação funcionando e acordar com ela toda errada inexplicavelmente Commented 18/06/2014 às 19:02
  • Isso acontece porque você não colocou os "items", que seriam os elementos de dentro do elemento com a classe bx-pager. Tente algo como <div class="bx-pager"><span><?php.
    – ptkato
    Commented 18/07/2014 às 21:51

2 Respostas 2

1

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];
0

Já tentou estruturar com <ul> e <li>? E eu usaria a classe bxslider na <ul>

2
  • Já tentei, também não vai Commented 19/06/2014 às 0:05
  • Ao invés de <div id="bx-pager"> tente <div class="bxslider"> só para ver se puxa as imagens. Já usei esse plugin e nunca tive problemas Commented 19/06/2014 às 8:20

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .