Problems with an ID Carousel custom field wordpress

0

Hi, I am having problems with the ID of a carousel in the integration of an html in wordpress, what I am doing is putting the Carousel inside repetaer ACF custom field. The same carousel will be repeated several times but with different content, the problem is that it does not rotate what I charge that are images, how can I make it work? The only thing that the carousel will show is an image that I call from a custom field "gallery_image"

$(document).ready(function() {
  $('#media').carousel({
    pause: true,
    interval: false,
  });
});
            <?php 

            // check for rows (parent repeater)
            if( have_rows('localidades_prov') ): ?>
            
              <?php // loop through rows (parent repeater)
                while( have_rows('localidades_prov') ): the_row(); ?>

                <article class="localidad">
                  <?php the_sub_field('titulo_localidad'); ?>
                    <p><strong>Técnico Local:</strong> <?php the_sub_field('tecnico_local'); ?></p>
                  
                    <?php 

                    // check for rows (sub repeater)
                    $active = "active";
                    if( have_rows('galeria') ): ?>

                      <div class="carousel slide media-carousel" id="media">
                        <?php 
                        
                        // loop through rows (sub repeater)
                        while( have_rows('galeria') ): the_row(); ?>

                            <div class="carousel-inner">
                              <div class="item  <?php echo $active; ?>">
                                <div class="row">
                                  <div class="col-md-12">
                                    <img style="width: 100%" src="<?php the_sub_field('galeria_imagen'); ?>"/>
                                  </div>          

                           
                                </div>
                              </div>
                            </div>
                            <a data-slide="prev" href="#media" class="left carousel-control">‹</a>
                            <a data-slide="next" href="#media" class="right carousel-control">›</a>

                                                                                  
                        <?php $active = ''; ?>

                        <?php endwhile; ?>

                      </div>
                    <?php endif; //if( get_sub_field('galeria') ): ?>

                  </article>

                <?php endwhile; // while( has_sub_field('localidad') ): ?>
            
            <?php endif; // if( get_field('localidad') ): ?>    
    
asked by MarianoF 21.03.2018 в 21:45
source

1 answer

0

It seems that you are closing the carousel for each image in the gallery.

Try taking out the closure of the carousel labels outside the loop and keep only the insertion of the image. More or less it would look like this:

$(document).ready(function() {
  $('#media').carousel({
    pause: true,
    interval: false,
  });
});

<?php
// check for rows (parent repeater)
if (have_rows('localidades_prov')): ?>
    <?php // loop through rows (parent repeater)
    while (have_rows('localidades_prov')): the_row(); ?>
        <article class="localidad">
            <?php the_sub_field('titulo_localidad'); ?>
            <p><strong>Técnico Local:</strong>
                <?php the_sub_field('tecnico_local'); ?></p><?php
                // check for rows (sub repeater)
                $active = "active";
                if (have_rows('galeria')): ?>
                    <div class="carousel slide media-carousel" id="media">
                        <div class="carousel-inner">
                        // loop through rows (sub repeater)
                        <?php while (have_rows('galeria')):
                            the_row(); ?>

                            <div class="item  <?php echo $active; ?>">
                                <div class="row">
                                    <div class="col-md-12">
                                        <img style="width: 100%"
                                             src="<?php the_sub_field('galeria_imagen'); ?>"/>

                                    </div>
                                </div>
                              </div>
                           <?php $active = ''; ?>
                            <?php endwhile; ?>
                        </div>
                        <a data-slide="prev" href="#media" class="left carousel-control">‹</a>
                        <a data-slide="next" href="#media" class="right carousel-control">›</a>
                    </div>
                <?php endif; //if( get_sub_field('galeria') ): ?></article>
    <?php endwhile; // while( has_sub_field('localidad') ): ?>
<?php endif; // if( get_field('localidad') ): ?>
    
answered by 22.03.2018 в 13:26