0

Hola estoy teniendo problemas con el ID de un carousel en la integracion de un html en wordpress, lo que estoy haciendo es poner el Carousel dentro de repetaer campo personalizado ACF. El mismo carousel se va repetir varias veces pero con distinto contenido, el problema es que no rota lo que le cargo que son imágenes, como puedo hacer para que funcione? Lo único que va a mostrar el carousel es una imagen que llamo desde un campo custom "galeria_imagen"

$(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') ): ?>    

4
  • Hola ¿puedes mostrar el resultado deseado y el obtenido? así podemos hacernos una idea ya que al tratarse de un wordpress y un custom field es imposible que lo pueda reproducir por mis medios.
    – ErnestoRM
    el 22 mar. 2018 a las 9:36
  • Prueba a cambiar $('#media').carousel({ por $('.media-carousel').carousel({
    – track3r
    el 22 mar. 2018 a las 9:53
  • no funciono eso de cambiar por .carousel, el ejemplo se puede ver aca.
    – MarianoF
    el 22 mar. 2018 a las 11:56

1 respuesta 1

0

Parece que estás cerrando el carousel por cada imagen de la galería.

Prueba sacando el cierre de las etiquetas del carousel fuera del bucle y mantén sólo la inserción de la imagen. Más o menos quedaría así:

$(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') ): ?>
7
  • Hola ernesto como estas? sabes que no me funciono? en algunos que tengo cargado mas de dos imagenes me las muestra una debajo de otra. nose si es mejor probar con un contador con foreach para no repetir los ID. Pero no se bien como armarlo.
    – MarianoF
    el 22 mar. 2018 a las 13:16
  • Hola @ElectricMarian ¿has insertado el jquery y el javascript debootstrap?
    – ErnestoRM
    el 22 mar. 2018 a las 13:52
  • Si por supuesto que lo hice
    – MarianoF
    el 22 mar. 2018 a las 13:54
  • Controla que la clase 'active' solo se añada en la primera imagen. He editado la respuesta modificando esto.
    – ErnestoRM
    el 22 mar. 2018 a las 14:08
  • Hola @ElectricMarian, ¿has conseguido resolver el problema?
    – ErnestoRM
    el 26 mar. 2018 a las 6:10

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.