ACF - Carrusel de arranque con miniaturas

Uso para mi sitio web un bootstrap deslizante con indicador de miniaturas. Uso Acf para wordpress para construir mi galería

Código fuente

Extiendo el deslizador y las miniaturas. el slider funciona pero nada sucedió whaen haga clic en las miniaturas porque no puedo configurar el código php para configurar el ID de miniaturas único y el deslizamiento de datos para

mi código:

php $galerie_de_photo_images = get_field( 'galerie_de_photo' ); ?
php if ( $galerie_de_photo_images ) :  ?
  

    

       
        
        
        
    
        php foreach ( $galerie_de_photo_images as $galerie_de_photo_image ): ?
           
  1. 
             <?php the_field( 'nom_de_la_chambre' ); ?>  - <?php the_field( 'texte_alternatif_hotel_insolite', 'option' ); ?>
            
    2. 
            php endforeach; ?
          

        

      

     php endif; ?

Mi JS

$('#custCarousel div.carousel-item:first-child').addClass('active');
$('#custCarousel ol.carousel-indicators li.list-inline-item:first-child').addClass('active');
$('#custCarousel ol.carousel-indicators li.list-inline-item:first-child a').addClass('select');

Pregunta hecha hace 3 años, 4 meses, 27 días - Por rubyrover

2 Respuestas:

  • Para resolver el problema en tu código PHP, necesitas configurar correctamente los ID únicos para las miniaturas y el deslizamiento de datos. Puedes hacerlo asignando un valor dinámico a los atributos data-target y id de las miniaturas correspondientes a cada imagen en tu galería de fotos.

    Aquí te dejo una sugerencia de cómo podrías modificar tu código PHP para lograr esto:

    php


    
    
    
        
                        
      
            
            
    1. 
                                    <?php the_field('nom_de_la_chambre'); ?> - <?php the_field('texte_alternatif_hotel_insolite', 'option'); ?>
                
            
      2.

    Con este ajuste, cada miniatura y su correspondiente indicador en el carrusel tendrán un ID único basado en el índice de la imagen en la galería de fotos. Esto permitirá que las miniaturas sean clicables y se sincronicen correctamente con las imágenes del carrusel.

    Recuerda actualizar tu código JavaScript para trabajar con estos nuevos IDs únicos si es necesario. Espero que esta solución te sea de ayuda. ¡Déjame saber si tienes alguna otra pregunta o necesitas más asistencia!

    Respondida el Dec 19, 2020 a las 08:04 - por Gpt

    Votos positivos: 0 | Votos negativos: 0

  • El problema que estás experimentando es que el código PHP que genera las miniaturas no está configurando correctamente el atributo data-slide-to para cada miniatura. Este atributo es esencial para que las miniaturas puedan controlar el deslizador.

    Aquí tienes el código PHP corregido:

    php


  
    
    
    
       
                        
      
        
        
           
    1. 
             <?php the_field( 'nom_de_la_chambre' ); ?>  - <?php the_field( 'texte_alternatif_hotel_insolite', 'option' ); ?>            
      2.

    He añadido el índice $i para generar valores únicos para el atributo data-slide-to y para las ID de las miniaturas. También he establecido la miniatura del primer elemento como "seleccionada" añadiendo la clase selected al primer elemento de la lista de indicadores.

    Una vez que hayas corregido el código PHP, también debes asegurarte de que tu JavaScript está configurado correctamente. Aquí tienes el JavaScript correcto:

    js
$(document).ready(function() {
  $('custCarousel div.carousel-item:first-child').addClass('active');  $('custCarousel ol.carousel-indicators li.list-inline-item:first-child').addClass('active');  $('custCarousel ol.carousel-indicators li.list-inline-item a').click(function() {    var slideTo = $(this).attr('data-slide-to');
    $('custCarousel').carousel(slideTo);  });
});

    Este JavaScript añade un controlador de clic a las miniaturas para que puedan controlar el deslizador.

    Espero que esto resuelva tu problema. Avísame si tienes alguna otra pregunta.

    Respondida el Dec 19, 2020 a las 08:10 - por Gemini

    Votos positivos: 0 | Votos negativos: 0