Show first 4 items inside div with class active rest without - php

Question

I got some projects that use a template layout/slider. The slider works by wrapping the first 4 projects in a div with class active and the rest inside divs without active but still grouped per 4.
I tried the following:
$tel = 1;
foreach($projectcr1 as $projects1) {
$projectimages = $projects1['images']; // Get image parameters of the article
$projectimgs = json_decode($projectimages); // Split the parameters apart
if($projectimgs->image_intro != ''){
$img = 'cms/'.$projectimgs->image_intro;
}else{
$img = 'cms/images/placeholder/placeholder.jpg';
}
if (strlen($projects1['introtext']) > 40){
$shortstrproj = substr($projects1['introtext'], 0, 40) . '...';
}else{
$shortstrproj = $projects1['introtext'];
}
if($projects1['id'] != ''){
if($tel == 1){
$projecten1 .= '<div class="carousel-item active">
<div class="row">';
}
//Here I need the first 4 projects ($projecten1 below is one project being looped)
$projecten1 .= '
<div class="col-xs-12 col-sm-6 col-lg-3 js-wpg-item" data-categories="'.$projects1['categorie_alias'].'">
<a class="card portfolio-grid__card js-wpg-card" href="project/'.$projects1['content_alias'].'.html">
<div class="imgwrapport">
<img width="360" height="180" src="'.$img.'" class="card-img-top portfolio-grid__card-img" alt="photo1" srcset="'.$img.' 360w, '.$img.' 300w, '.$img.' 768w, '.$img.' 540w, '.$img.' 830w"
sizes="(max-width: 360px) 100vw, 360px">
</div>
<div class="card-block portfolio-grid__card-block">
<h5 class="card-title ortfolio-grid__card-title">'.$projects1['title'].'</h5>
<p class="portfolio-grid__card-price">'.strip_tags($shortstrproj).'</p>
<div class="portfolio-grid__card-items">
<p class="portfolio-grid__card-item">
Bekijk project
</p>
</div>
</div>
</a>
</div>';
if(($tel % 4) == 0){
$projecten1 .= '</div></div><div class="carousel-item">
<div class="row">';
// Here I need the rest of the projects
$projecten1 .= '</div></div>';
}
$tel++;
}
}
echo $projecten1;
?>
If $tel = 1 wrap the div with active around the items. Then when $tel % 4 leaves 0 (4 divided by 4 leaves 0), close the divs and start new ones but this time without the active class.
This works fine, my only issue is how to seperate the data. How can I show the first 4 projects inside the first div, and the rest in the following divs without active class?
Example how I want the code in the end:
<div class="carousel-item active">
<div class="row">
project1
project2
project3
project4
</div>
</div>
<div class="carousel-item">
<div class="row">
project5
project6
project7
project8
</div>
</div>
<div class="carousel-item">
<div class="row">
project9
project10
project11
project12
</div>
</div>

Answer 1

try this Code . if u have questions about the code just post under it.
<?php
$tel = 1;
$next_div = true;
$foreach_ended = 0;
// 2 New vars they are needed for the right output down
foreach($projectcr1 as $projects1) {
$projectimages = $projects1['images']; // Get image parameters of the article
$projectimgs = json_decode($projectimages); // Split the parameters apart
if($projectimgs->image_intro != ''){
$img = 'cms/'.$projectimgs->image_intro;
}else{
$img = 'cms/images/placeholder/placeholder.jpg';
}
if (strlen($projects1['introtext']) > 40){
$shortstrproj = substr($projects1['introtext'], 0, 40) . '...';
}else{
$shortstrproj = $projects1['introtext'];
}
if($projects1['id'] != '')
{
$foreach_ended=0;
// set to 0 when a DIV is Open.
if($tel == 1&&$next_div==true){ /* set the first ACTIVE div with $next_div */
$projecten1 .= '<div class="carousel-item active"><div class="row">';
$next_div=false; /* set it to false so every new 4xDIV is not Active */
}
elseif($tel == 1&&$next_div!=true)
{
$projecten1 .= '<div class="carousel-item"><div class="row">';
}else{}
$projecten1 .= '
<div class="col-xs-12 col-sm-6 col-lg-3 js-wpg-item" data-categories="'.$projects1['categorie_alias'].'">
<a class="card portfolio-grid__card js-wpg-card" href="project/'.$projects1['content_alias'].'.html">
<div class="imgwrapport">
<img width="360" height="180" src="'.$img.'" class="card-img-top portfolio-grid__card-img" alt="photo1" srcset="'.$img.' 360w, '.$img.' 300w, '.$img.' 768w, '.$img.' 540w, '.$img.' 830w"
sizes="(max-width: 360px) 100vw, 360px">
</div>
<div class="card-block portfolio-grid__card-block">
<h5 class="card-title ortfolio-grid__card-title">'.$projects1['title'].'</h5>
<p class="portfolio-grid__card-price">'.strip_tags($shortstrproj).'</p>
<div class="portfolio-grid__card-items">
<p class="portfolio-grid__card-item">
Bekijk project
</p>
</div>
</div>
</a>
</div>';
if(($tel % 4) == 0){
$tel=1; /* reset Tel */
$projecten1 .= '</div></div>'; /* End DIV when 4x is reached */
$foreach_ended=1; /* set DIV to closed */
}
else
{
$tel++;
}
}
}
if($foreach_ended==0){$projecten1 .= '</div></div>';} /* when the Foreach enden and the LAST div had less then 4 items its not marked as CLOSED . so this IF closes the last open DIV */
echo $projecten1;
?>