1

Eu estou usando o plugin bxslider. Cada slider contém 6 imagens que são divididas em 3 div, cuja classes são item_top e item_bottom, para três imagens de cima e de baixo, respectivamente. Quando eu primeiramente peguei o código estático, estava assim:

<ul>
    <li>
        <div class="item_top">
            <img src="image_1.jpg"/>
        </div>
        <div class="item_bottom">
            <img src="image_2.jpg"/>
        </div>
    </li>
    ...
    ...
</ul>

A cada 3 li forma um slide. O problema é que eu agora trago essas imagens do banco de dados, então não posso simplesmente adicionar duas div em cada li pois se não as imagens virão duplicadas. Assim, o código está assim agora:

<ul>
    <li>
        <div class="">
            <img src="<?php echo $x['imagem']; ?>"/>
        </div>
    </li>
    ...
    ...
</ul>

Procurei por soluções, e a melhor que eu achei foi remover do HTML as li, envolver com JavaScript contando cada 2 div, e então adicionar as classes para cada div odd e even. Desta maneira não funcionou como desejava, pois o plugin configurou as regras para as div ao invés das li, e mesmo adicioniando via JS, houve problemas.

Preciso de ajuda. Se desejaram, há um exemplo do HTML estático neste site aqui, na área "Concessionárias e Revendas", para verem como que preciso que esteja visualmente, vindo imagens do banco de dados.

2
  • Deixa eu entender direito, o problema é que pela base de dados você nao consegue controlar se vai vir 3 certinho ou de 2 em 2?
    – RBoschini
    Commented 9/12/2015 às 15:53
  • @RBoschini Isto. Da forma como está no meu código, que é o segundo bloco mostrado, ele apenas exibe três imagens em um slide, e mais três no próximo. Eu preciso que esse segundo trio de imagens fique abaixo do primeiro. Atualmente cada slide deveria conter 3 li, e dentro de cada uma, dois div com as classes citadas, porém se for necessário modificar a estrutura, e colocar três imagens por div, eu acredito que não haverá problemas, eu apenas preciso que fique da forma como está no link que passei. :)
    – user29910
    Commented 9/12/2015 às 16:02

1 Resposta 1

0

Pelo link que você passou de exemplo, eu sugiro que você crie um campo em sua tabela para identifique se a imagem é topo ou bottom e o retorno da consulta ficaria:

<ul>
<?php foreach ($imagem as $x){ ?>
    <li>
      <?php if ($x['nome-do-campo'] == 'top'){ ?>
        <div class="item_top">
            <img src="<?php echo $x['imagem']; ?>"/>
        </div>
      <?php } else { ?>
        <div class="item_bottom">
            <img src="<?php echo $x['imagem']; ?>"/>
        </div>
      <?php }?>
    </li>
<?php } ?>
</ul>
1
  • Infelizmente não deu muito certo porque a condição ainda vai exibir apenas uma imagem em cada div.
    – user29910
    Commented 9/12/2015 às 18:55

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