Separate 6 images in 3 div, forming a slider with bxslider

Question

I am using the plugin bxslider. Each slider contains 6 images that are divided into 3 div, whose classes are item_top and item_bottom, for three images from top and bottom, respectively. When I first picked up the static code, it was like this:

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

Every 3 li shape a slide. The problem is that I now bring these images from the database, so I can’t just add two div in each li because otherwise the images will come duplicated. So the code is like this now:

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

I looked for solutions, and the best I found was to remove from HTML as li, engage with Javascript counting every 2 div, and then add the classes for each div odd and even. This way did not work as desired, because the plugin set the rules for div instead of li, and even adding via JS, there were problems.

I need help. If you wish, there is an example of static HTML in this website here, in the "Dealers and Resellers" area, to see how I need you to be visually, coming images from the database.

Answer 1

By the link you passed from example, I suggest you create a field in your table to identify if the image is top or bottom and the return of the query would be:

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