Logic to make carousel for gallery thumbs with four children in each item

single-product.php

<?php
/**
 * The Template for displaying all single products
 *
 * @package gallery-thumbs
 */

if ( ! defined( 'ABSPATH' ) ) {
	exit; // Exit if accessed directly.
}

;

get_header(); ?>

	<?php if ( $gallery = get_field( 'imagens' ) ) : ?>

	<div id="novo-carousel" class="carousel slide gallery_thumbs" data-ride="carousel" data-interval="false">

		<!-- Wrapper for slides -->
		<div class="carousel-inner" role="listbox">

			<?php
			$counter = 0;
			foreach ( $gallery as $image ) {
				$first = ( reset( $gallery ) === $image );
				$active = $first ? ' active' : '';

				if ( 0 === $counter % 4 ) {
					if ( ! $first ) { echo '</div>'; }
					echo '<div class="item' . esc_attr( $active ) . '">';
				}
				?>

				<div data-target="#novo-carousel" data-slide-top="<?php echo esc_attr( $counter ); ?>">
					<?php echo wp_get_attachment_image( $image['id'], 'single_prod_thumb' ); ?>
				</div>

				<?php
				if ( end( $gallery ) === $image ) { echo '</div>'; }
				$counter++;
			}
			?>

		</div>

		<!-- Controls -->
		<a class="left carousel-control" href="#novo-carousel" role="button" data-slide="prev">
			<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
			<span class="sr-only">Previous</span>
		</a>
		<a class="right carousel-control" href="#novo-carousel" role="button" data-slide="next">
			<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
			<span class="sr-only">Next</span>
		</a>
	</div>

	<?php endif; ?>

<?php get_footer();