EDIT
Ok so after better understanding your issue, I would not use a counter but a true/false flag that we switch when it’s been used. Try this code.
$cats = array('batiments-delevage', 'logements-bovin', 'stockages-deffluents', 'soins-et-hygiene');
$exclude_posts = array();
$active = true;
foreach( $cats as $cat ) :
// build query argument
$query_args = array(
'category_name' => $cat,
'posts_per_page'=> 1,
'post_type' => 'post',
'post_status' => 'publish',
'meta_key' => 'wpb_post_views_count', //custom field for view count
'orderby' => 'meta_value_num',
'order' => 'DESC'
);
// exclude post that already have been fetched
// this would be useful if multiple category is assigned for same post
if( !empty($exclude_posts) )
$query_args['post__not_in'] = $exclude_posts;
// do query
$query = new WP_Query( $query_args );
if ($query->have_posts()) : // check if query have any post
while ($query->have_posts()) : $query->the_post(); // start loop & set post global
// Get category slug parent info
$category = get_the_category();
$cat_slug = $category[0]->slug;
$cat_name = $category[0]->name;
$cat_url = get_category_link( $category[0]->cat_ID );
$post_date_month = get_the_date('M');
$post_date_year = get_the_date('Y');
$exclude_posts[] = get_the_ID();
?><div class="item <?php if( $active ){ echo 'active'; $active = false; } ?>">
<header class="header-item">
<a class="link-img" href="https://wordpress.stackexchange.com/questions/237694/<?php the_permalink(); ?>">
<?php the_post_thumbnail('tab-slider', array( 'class' => 'img-responsive') ); ?>
</a>
<div class="date-box"><?php
echo $post_date_month.'<br/>';
echo '<small>'.$post_date_year.'</small>';
?></div>
</header><!-- /header -->
<div class="carousel-caption">
<h4><a href="https://wordpress.stackexchange.com/questions/237694/<?php the_permalink(); ?>"><?php the_title(); ?></a></h4>
<p class="meta-cat"><small><span class="inline-categ-icon visible-xs-block visible-sm-block icon-<?php echo $cat_slug;?>"></span> Dans <a href="<?php echo $cat_url;?>" title="Voir les articles dans la rubrique « <?php echo $cat_name;?> » "><?php echo $cat_name;?></a></small></p>
<p class="most-view-excerpt"><?php echo excerpt(27); ?></p>
</div>
<p><a class="read-more" href="https://wordpress.stackexchange.com/questions/237694/<?php the_permalink(); ?>" title="Lire notre article <?php the_title(); ?>">Lire le reportage</a></p>
</div>
<?php endwhile; endif; ?>
<?php endforeach; ?>
ORIGINAL
You don’t need a counter to do the job, you can use the current_post
property of the current object which returns the index of the current object
so instead of using
if ($i == 0)
try
if( 0 == $query->current_post )
and get rid of your counters