Tag: display

I am trying to achieve a grid layout as such that posts will be visible on a carousel slider. Each slide will consist of 8 posts. 4 posts per row.

I am using bootstrap as well.

I want html to look like:

<div class="slider_container">
<div class="services-slide">
<div class="row">
<div class="col-md-3">
<div class="box-desc">
<h4>title 1</h4>
</div>
<div class="col-md-3">
<div class="box-desc">
<h4>title 2</h4>
</div>
<div class="col-md-3">
<div class="box-desc">
<h4>title 3</h4>
</div>
<div class="col-md-3">
<div class="box-desc">
<h4>title 4</h4>
</div>
</div>
<div class="row">
<div class="col-md-3">
<div class="box-desc">
<h4>title 5</h4>
</div>
<div class="col-md-3">
<div class="box-desc">
<h4>title 6</h4>
</div>
<div class="col-md-3">
<div class="box-desc">
<h4>title 7</h4>
</div>
<div class="col-md-3">
<div class="box-desc">
<h4>title 8</h4>
</div>
</div>
</div>
<div class="services-slide">
<div class="row">
<div class="col-md-3">
<div class="box-desc">
<h4>title 9</h4>
</div>
<div class="col-md-3">
<div class="box-desc">
<h4>title 10</h4>
</div>
<div class="col-md-3">
<div class="box-desc">
<h4>title 11</h4>
</div>
<div class="col-md-3">
<div class="box-desc">
<h4>title 12</h4>
</div>
</div>
<div class="row">
<div class="col-md-3">
<div class="box-desc">
<h4>title 13</h4>
</div>
<div class="col-md-3">
<div class="box-desc">
<h4>title 14</h4>
</div>
<div class="col-md-3">
<div class="box-desc">
<h4>title 15</h4>
</div>
<div class="col-md-3">
<div class="box-desc">
<h4>title 16</h4>
</div>
</div>
</div>
</div>

Here is my code but it is not working though.

<div class="slider_container">
<?php
ob_start();
$args = array( 'post_type' => 'services','posts_per_page' =>-1,'order' => 'ASC');
$the_query = new WP_Query($args);
if ($the_query->have_posts()) : 
$i = 0;
$o = 0;
  ?>
<?php while ($the_query->have_posts()) : $the_query->the_post(); ?>
<div class="services-slide">
 <div class="row">
   <?php if ($i == 4) { $i = 0; ?>
    </div>
    <div class="row">
   <?php } ?>
   <div class="col-md-3">
       <div class="box-desc">
            <h4><?php echo get_the_title(); ?></h4>
        </div>
    </div>
</div>
  <?php $i++; ?>
</div>
<?php endwhile; ?>
<?php
endif;
wp_reset_postdata();
$content = ob_get_contents();
ob_end_clean();
return $content; ?>
</div>

Please help.