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
    Commented el 22 mar. 2018 a las 9:36
  • Prueba a cambiar $('#media').carousel({ por $('.media-carousel').carousel({
    – track3r
    Commented el 22 mar. 2018 a las 9:53
  • no funciono eso de cambiar por .carousel, el ejemplo se puede ver aca.
    – MarianoF
    Commented el 22 mar. 2018 a las 11:56
  • qkstudiodemo.com/fundacionlomanegra/web/localidades
    – MarianoF
    Commented 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
    Commented el 22 mar. 2018 a las 13:16
  • Hola @ElectricMarian ¿has insertado el jquery y el javascript debootstrap?
    – ErnestoRM
    Commented el 22 mar. 2018 a las 13:52
  • Si por supuesto que lo hice
    – MarianoF
    Commented 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
    Commented el 22 mar. 2018 a las 14:08
  • Hola @ElectricMarian, ¿has conseguido resolver el problema?
    – ErnestoRM
    Commented el 26 mar. 2018 a las 6:10

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

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