CODEWITHSUNDEEP
phptwitter-bootstrapcodeignitercarousel
raavi
raavi

Reputation: 83

logic for slider dynamic images loop with php

I am working on bootstrap carousel slider. I am trying to load the dynamic images in the slider with PHP array. I have 4(count is not fixed) image paths in PHP array.

My HTML code below:

<div class="carousel-inner">
    <div class="item active">
        <a href=""><img src="<?=base_url()?>images/product-details/similar1.jpg" alt=""></a>
        <a href=""><img src="<?=base_url()?>images/product-details/similar2.jpg" alt=""></a>
        <a href=""><img src="<?=base_url()?>images/product-details/similar3.jpg" alt=""></a>
    </div>
    <div class="item">
        <a href=""><img src="<?=base_url()?>images/product-details/similar1.jpg" alt=""></a>
        <a href=""><img src="<?=base_url()?>images/product-details/similar2.jpg" alt=""></a>
        <a href=""><img src="<?=base_url()?>images/product-details/similar3.jpg" alt=""></a>
    </div>
    <div class="item">
        <a href=""><img src="<?=base_url()?>images/product-details/similar1.jpg" alt=""></a>
        <a href=""><img src="<?=base_url()?>images/product-details/similar2.jpg" alt=""></a>
        <a href=""><img src="<?=base_url()?>images/product-details/similar3.jpg" alt=""></a>
    </div>
</div>

I need a logic to loop the array and load my images in the html.

My expected HTML like

<div class="carousel-inner">
    <div class="item active">
        <a href=""><img src="<?=base_url()?>images/product-details/similar1.jpg" alt=""></a>
        <a href=""><img src="<?=base_url()?>images/product-details/similar2.jpg" alt=""></a>
        <a href=""><img src="<?=base_url()?>images/product-details/similar3.jpg" alt=""></a>
    </div>
    <div class="item">
        <a href=""><img src="<?=base_url()?>images/product-details/similar1.jpg" alt=""></a>    
    </div>
</div>

please help me

Upvotes: 1

Views: 1890

Answers (2)

Abdulla Nilam
Abdulla Nilam

Reputation: 38672

do like this

<div class="carousel-inner">
    <div class="item active">
        <?php
        $count = 0;
        foreach ($images as $key => $image)
        {
            if ($count == 2)
            {
            ?>
                </div>
                <div class="item">
                <?php
                $count = 0;
            }
            ?>
                <a href=""><img src="<?=base_url()?>images/product-details/<?= $image?>" alt=""></a>
            <?php
            $count += 1;
        }
        ?>
    </div>
</div>

What you should do in above code

  1. $images should be your array name
  2. <?=base_url()?>images/product-details/<?= $image?> add the correct path here

What happens in above code

Each and every time <a> tab with print inside <img> and whenever it meets if == 2 (count is 3) it will add new <div> and make count to 0

Upvotes: 2

Rp9
Rp9

Reputation: 1963

$count = 1;

 foreach( $images as $img ) 
 {
   if ($count%4 == 1)
  {  
     echo '<div class="item active">';

  }
  echo '<a href=""><img src="<?=base_url()?>images/product-details/similar1.jpg" alt=""></a>';

  if ($count%4 == 0)
  {
          echo "</div>";
  }
   $count++;
 }
  if ($count%4 != 1) echo "</div>";

Upvotes: 1

Related Questions