Eh Jewel
Eh Jewel

Reputation: 717

Increase loop by two and loop into loop

I have an HTML markup like bellow-

<div class="f_product_slider slick">
  <div class="row slider_item">
    <div class="col-lg-5 col-sm-6">
        <div class="item">
            <img src="image/bike/cycle_2.png" alt="">
            <div class="content text-right">
                <a href="product-details.html"><h6>Specialized Sirrus Carbon - 2018</h6></a>
                <p>Slayer Bike Expert</p>
            </div>
        </div>
    </div>
    <div class="col-lg-5 col-sm-6">
        <div class="item item_two">
            <img src="image/bike/cycle_2.png" alt="">
            <div class="content text-right">
                <a href="product-details.html"><h6>Specialized Sirrus Carbon - 2018</h6></a>
                <p>Slayer Bike Expert</p>
            </div>
        </div>
    </div>
</div>
<div class="row slider_item">
    <div class="col-lg-5 col-sm-6">
        <div class="item">
            <img src="image/bike/cycle_2.png" alt="">
            <div class="content text-right">
                <a href="product-details.html"><h6>Specialized Sirrus Carbon - 2018</h6></a>
                <p>Slayer Bike Expert</p>
            </div>
        </div>
    </div>
    <div class="col-lg-5 col-sm-6">
        <div class="item item_two">
            <img src="image/bike/cycle_2.png" alt="">
            <div class="content text-right">
                <a href="product-details.html"><h6>Specialized Sirrus Carbon - 2018</h6></a>
                <p>Slayer Bike Expert</p>
            </div>
        </div>
    </div>
  </div>
</div>

Here, every row items containing two items. That's mean, every two loop items rendered in every step of the loop. I'm giving here a visual example of this loop- enter image description here

How can I make it possible with PHP while loop? Please, don't hesitate to ask me for more details if you get confused by the question.

Upvotes: 0

Views: 49

Answers (1)

zen
zen

Reputation: 992

With for:

<div class="f_product_slider slick">
    <?php for($slideCounter = 0; $slideCounter < 2; $slideCounter++) { ?>
    <div class="row slider_item">
        <?php for($colCounter = 0; $colCounter < 2; $colCounter++) { ?>
        <div class="col-lg-5 col-sm-6">
            <div class="item">
                <img src="image/bike/cycle_2.png" alt="">
                <div class="content text-right">
                    <a href="product-details.html"><h6>Specialized Sirrus Carbon - 2018</h6></a>
                    <p>Slayer Bike Expert</p>
                </div>
            </div>
        </div>
        <?php } ?>
    </div>
    <?php } ?>
</div>

With while:

<div class="f_product_slider slick">
    <?php
        $slideCounter = 0;
        while($slideCounter < 2) {
            $slideCounter++ ?>
    <div class="row slider_item">
        <?php
        $colCounter = 0;
        while($colCounter < 2) {
            $colCounter++ ?>

        <div class="col-lg-5 col-sm-6">
            <div class="item">
                <img src="image/bike/cycle_2.png" alt="">
                <div class="content text-right">
                    <a href="product-details.html"><h6>Specialized Sirrus Carbon - 2018</h6></a>
                    <p>Slayer Bike Expert</p>
                </div>
            </div>
        </div>
        <?php } ?>
    </div>
    <?php } ?>
</div>

Upvotes: 1

Related Questions