Create Bootstrap carousel using nested repeater

• rvcomso

• June 18, 2021 at 2:14 am

Hi,
I’m working on a map that can display an information on click on each area.
These <div> of information are created by using ACF repeater.
This main AFC contains Name, Description, ID and Photo Gallery as another repeater.
For the photo gallery, I’m using Bootstrap5 carousel.
So far, I manage to display a carousel.
The problem is, the next and previous icon don’t work properly.
They only work on one carousel page.
I tried to put <?php wp_reset_postdata(); ?> to reset a data but it doesn’t work.
I’m not sure if the problem comes from my javascripts or my code below.
Here is my code,

	
<section id="carte_communes" class="row justify-content-md-center">
	<div class="col-12 col-md-4"  id="lacartecommunes">
	<?php get_template_part('carte_communes', 'index');?>
	</div>
	<div class="col-12 col-md-6"  id="infoscommunes">
		<div class="row info_cor">
			<div class="col-12 col-md-6 logo_info_cor">
				<img src="<?php bloginfo('stylesheet_directory'); ?>/images/logo_cor_bloc.png" title="COR - Communauté de Communes Ouest Rhodanien" ></div>
			<div class="col-12 col-md-6 text_info_cor"><?php the_field('infos_cor', 'option'); ?></div>
		</div>
		<div class="row click_pour_info">
			<div class="col-8 col-md-8" id="text_click">
				<h2 >Cliquez sur les communes pour en savoir en<strong>COR</strong>e plus sur le territoire !</h2>
			</div>
		</div>
			 	<?php while( have_rows('les_communes_cor', 'option') ): the_row();
				// vars
 				$photo = get_sub_field('photo_commune_cor', 'option');
				$nom_commune = get_sub_field('nom_commune_cor', 'option');
				$slug_commune = get_sub_field('identifiant_commune', 'option');
				$descript_commune = get_sub_field('descriptif_commune_cor', 'option');
				?>
			
		<div id="commune_info_<?php echo $slug_commune; ?>" class="row " >
			<h3 class="col-12 col-md-12" style="text-align: left !important"><?php echo $nom_commune; ?></h3>
			<div class="col-12 col-md-6 photo_commune" >
				
				<?php if( have_rows('photo_commune_cor') ):
						$i = 1; // Set the increment variable
						$nombre = 0;
						echo '<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
						<div class="carousel-indicators">
  ';
  
  	// loop through the rows of data for the tab header
    while ( have_rows('photo_commune_cor') ) : the_row();
    ?>
    
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="<?php echo $nombre;?>" class="<?php if($nombre == 0) echo 'active';?>"></button>
			
	<?php   $nombre++; // Increment the increment variable	
	
	endwhile; //End the loop 
	 wp_reset_postdata();  
		
	echo 	'</div>
		  <div class="carousel-inner map">';
  
	 	
						// loop through the rows of data for the tab header
						while ( have_rows('photo_commune_cor') ) : the_row();
			
						$image = get_sub_field('photo_commune_slider');
			
						?>
		
						<div class="carousel-item map <?php if($i == 1) echo 'active';?>" style="background-image: url(<?php echo $image['url']; ?>)">				
						</div>
	
											 	    
					<?php   $i++; // Increment the increment variable
					endwhile; //End the loop 
		
		
					echo '
					
					</div>  
					<button class="carousel-control-prev map" type="button" data-bs-target="#carouselExampleIndicators"  data-bs-slide="prev">
						<span class="carousel-control-prev-icon" aria-hidden="true"></span>
						<span class="visually-hidden">Précédent</span>
					</button>
					<button class="carousel-control-next map" type="button" data-bs-target="#carouselExampleIndicators"  data-bs-slide="next">
						<span class="carousel-control-next-icon" aria-hidden="true"></span>
						<span class="visually-hidden">Suivant</span>
					</button>
					</div>';
	
					else :
					// no rows found
			
					endif; ?>

					
			</div>
			<div class="col-12 col-md-6 descr_commune"> <?php echo $descript_commune; ?>
</div>
			
		</div>
	
			 <?php endwhile; ?>
 <?php wp_reset_postdata(); ?>

	</div>
	
</section>	
	

also want to share some part of my javascripts, just in case if it could be more clear.

<script>
$("#lacartecommunes").click(function(ev){
        var target = $(ev.target);
        var targetId = target.attr('id');
        if(targetId == 'chenelette') {
	      $(".click_pour_info").removeClass("show").addClass('hide');
          $(".show").removeClass("show").addClass('hide'); // remove previous div show class and hide it
          $("#commune_info_chenelette").removeClass('hide').addClass("show");// remove previous div hide class and show it
        }
        });
$("#lacartecommunes").click(function(ev){
        var target = $(ev.target);
        var targetId = target.attr('id');
        if(targetId == 'poule') {
	      $(".click_pour_info").removeClass("show").addClass('hide');
          $(".show").removeClass("show").addClass('hide'); 
          $("#commune_info_poule").removeClass('hide').addClass("show");
        }
        });
$("#lacartecommunes").click(function(ev){
        var target = $(ev.target);
        var targetId = target.attr('id');
        if(targetId == 'affoux') {
	      $(".click_pour_info").removeClass("show").addClass('hide');
          $(".show").removeClass("show").addClass('hide'); 
          $("#commune_info_affoux").removeClass('hide').addClass("show");
        }
        });
</script>

I’m sorry that the code is kind of messy.
Thank you for any suggestion!