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

Question

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

Navigation

#1 by (0 votes)

1

I'm using the bxslider plugin. Each slider contains 6 images that are divided into 3 div , whose classes are item_top and item_bottom , for three images from above and below, respectively. When I first got the static code, it looked 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 forms a slide. The problem is that I now bring these images from the database, so I can not simply add two div to each li otherwise the images will be duplicated. So, the code looks like this now:

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

I searched for solutions, and the best I found was to remove li from HTML, engage with JavaScript by counting every 2 div , and then add classes for each odd and even div. This way it did not work as it wished, 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 site here , in the "Dealers and Resellers" area, to see how I need to be visually , coming images from the database.

jquery css bxslider

asked by anonymous 09.12.2015 / 16:38

1 answer

How to adjust the rectangle in the same position on the screen using CreateRectRgn? Use AdMob or similar for Windows Phone [Construct 2]?

score 0 · Answer 1

From the example link, I suggest you create a field in your table to identify whether the image is top or bottom and the return of the query would look like this:

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