使用php在一个幻灯片中显示两个图像

Question

I am working on an application where i have a slider made in bootstrap but in slider there are two images in one slide show instead of one, so i have wrote a simple select query to get record but the problem is that it showing same images on boxes, i dont know how i can get next data in one loop

here is the code

    <div class="carousel-inner">         
    <?php if($blog) : $counter = 0; foreach($blog as $blogs) : $counter++; ?>
    <?php if($counter === 1) : ?>
    <div class="item active">
    <?php else : ?>
    <div class="item">
    <?php endif; ?>
        <div class="row">
            <div class="col-md-6">
                <div class="panel">
                    <div class="panel-heading">
                        <h3>
                            <a href="#"> <?php echo substr($blogs -> heading, 0, 30); ?> </a> <br> <br> <br>
                            <p> <?php echo substr($blogs -> description, 0, 300); ?>  <br><br>
                            <a href="#" class="link">Read the full story</a> </p><br>
                            <img src="<?php echo base_url().$blogs -> image; ?>">
                        </h3>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="panel">
                    <div class="panel-heading">
                        <h3>
                            <a href="#"> <?php echo substr($blogs -> heading, 0, 30); ?> </a> <br> <br> <br>
                            <p> <?php echo substr($blogs -> description, 0, 300); ?>  <br><br>
                            <a href="#" class="link">Read the full story</a> </p><br>
                            <img src="<?php echo base_url().$blogs -> image; ?>">
                        </h3>
                    </div>
                </div>
            </div>
        </div><!--.row-->
    </div><!--.item-->
    <?php endforeach; endif; ?>

</div><!--.carousel-inner-->
  <a data-slide="prev" href="#blog" class="left carousel-control">‹</a>
  <a data-slide="next" href="#blog" class="right carousel-control">›</a>
</div><!--.Carousel-->

the above is the result but i want the second image to be the next data from db

Answer 1

try this:

 <div class="carousel-inner">         
<?php if($blog) : $counter = 0; foreach($blog as $blogs) : $counter++; ?>
<?php if($counter === 1) : ?>
<div class="item active">
<?php else : ?>
<div class="item">
<?php endif; ?>
    <div class="row">
        <div class="col-md-6">
            <div class="panel">
                <div class="panel-heading">
                    <h3>
                        <a href="#"> <?php echo substr($blogs -> heading, 0, 30); ?> </a> <br> <br> <br>
                        <p> <?php echo substr($blogs -> description, 0, 300); ?>  <br><br>
                        <a href="#" class="link">Read the full story</a> </p><br>
                        <img src="<?php echo base_url().$blogs -> image; ?>">
                    </h3>
                </div>
            </div>
        </div>
   <?php endforeach; endif; ?>

What outputs if you post this?