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.
li
, e dentro de cada uma, doisdiv
com as classes citadas, porém se for necessário modificar a estrutura, e colocar três imagens pordiv
, eu acredito que não haverá problemas, eu apenas preciso que fique da forma como está no link que passei. :)