I have a problem with a carousel that I put in a wordpress theme, I attached the link example site where you can see the problem, it turns out that each point has a carousel when clicked is displayed, but I am working only one when I should walk most of the points, the fields are customizable with advanced custom field. The problem is not whether it is because of the carousel id that only one takes me. I attach the code that I implemented. Although from the back end I have loaded the images for each carousel, it can only make one work.
$(document).ready(function() {
$('.carruMio').carousel({
pause: true,
interval: false,
});
});
<?php
$localidades = get_field('localidades_prov', get_the_ID());
if ($localidades) { ?>
<?php foreach ($localidades as $loc){ ?>
<article class="localidad">
<?php echo $loc['titulo_localidad']; ?>
<p><strong>Técnico Local:</strong> <?php echo $loc['tecnico_local']; ?></p>
<?php $active = "active";
$count = 0; ?>
<div class="carousel slide media-carousel carruMio" id="media">
<div class="carousel-inner">
<?php foreach ($loc['galeria'] as $gal) { ?>
<div class="item <?php echo $active; ?>">
<div class="row">
<div class="col-md-12">
<img style="width: 100%" src="<?php echo $gal['galeria_imagen']; ?>"/>
</div>
</div>
</div>
<?php $active = '';?>
<?php } ?>
</div>
<a data-slide="prev" href="#media" class="left carousel-control"><span class="glyphicon glyphicon-chevron-left"></span></a>
<a data-slide="next" href="#media" class="right carousel-control"><span class="glyphicon glyphicon-chevron-right"></span></a>
</div>
</article>
<?php } ?>
<?php } ?>