Advanced custom fields bootstrap slider active state - php

Question

I have a slider built in bootstrap and using Advanced Custom Fields in WordPress, my data attribute when written in HTMl the data-slide-to="" would be 0, 1 ,2 ,3 and so on.
If i was to write this in HTML it works. now I have integrated it with WordPress Advanced Custom Fields and added php I can now inspect the code and see the data attribute having 0, 1, 2, 3 onward. however now i click on the div with this attribute and the slide wont change as it did written in HTML.
is there something in my code preventing this, why wont my slide change now if click on the div with a different data-slide-to=""?
For example in HTML if i click on the div with data-slide-to="1" then it shows the second slide.
however now written in PHP this in not working, can some one help me understand why?
my code
<?php
$sliderImages = get_field('slider');
$count = 0;
?>
<section class="pb-5">
<div class="container">
<div id="carousel_03" class="carousel slide" data-ride="carousel">
<div class="row">
<div class="col-lg-4">
<ol class="carousel-indicators tabs row">
<?php if (have_rows('slider')):
while (have_rows('slider')): the_row();
?>
<li class="col-lg-12 col-sm-6 mb-2 <?php echo ($count ++) >= 1 ? '' : 'active'; ?> ">
<div data-target="#carousel_3" data-slide-to="<?php echo ($count ++); ?>" role="button"
class="carousel-indicator p-3">
<h4 class="mb-1"><?php the_sub_field('title', $post->ID)?></h4>
<?php
endwhile;
endif;
?>
</div>
</li>
</ol>
</div>
<div class="col-lg-8 mb-3">
<div class="carousel-inner">
<?php foreach ($sliderImages as $imgNumber => $image) : ?>
<div class="carousel-item<?php if ($imgNumber === 0) : ?> active<?php endif ?>">
<img src="<?= $image['image']['url'] ?>" alt="<?= $image['image']['alt'] ?>">
</div>
<?php endforeach ?>
</div>
<a class="carousel-control-prev" href="#carousel_03" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only"></span>
</a>
<a class="carousel-control-next" href="#carousel_03" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only"></span>
</a>
</div>
</div>
</div>
</div>
</section>