0

tengo un slider que esta hecho con Bootstrap, pero en otro div aparte tengo unas imágenes, deseo mostrar una imagen si es que la clase del slider es "active" y la clase "imagen" y ocultar las otras imágenes. Es decir si se muestra en el slider la clase "active y elemento-1" mostrar la imagen con ID "imagen-1", si es el slider con la clase "active y elemento-2", mostrar la imagen con ID "imagen-2".

Aquí dejo el código que intento hacer en js.

    function ocultarMostrarImagen () {
      if (document.getElementsByClassName('elemento-1') && document.getElementsByClassName('active') == true) {
        document.getElementById('imagen-1').style.display = 'block';
      } else {
        document.getElementById('imagen-1').style.display = 'none';
      }
      
    }
  
  </script>


Y este es el html:
```  <div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="false">
        <div class="carousel-indicators">
          <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
          
          <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
          <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3"></button>
        </div>
        <div class="carousel-inner">
          <div class="carousel-item active elemento-1">  
            <img src="32016.jpg" class="d-block w-100" alt="...">
            <div class="carousel-caption d-none d-md-block">
              
              <img class="img-slider-diseno" src="imagenes/ensayo-tintes-penetrantes.svg" alt="">
              <h5>Tintes Penetrantes</h5>
            </div>
          </div>
          <div class="carousel-item">
            <img src="32016.jpg" class="d-block w-100" alt="...">
            <div class="carousel-caption d-none d-md-block">
              <img class="img-slider-diseno" src="imagenes/ensayo-particulas-magneticas.svg" alt="">
              <h5>Partículas Magnéticas</h5>
            </div>
          </div>
          <div class="carousel-item">
            <img src="32016.jpg" class="d-block w-100" alt="...">
            <div class="carousel-caption d-none d-md-block">
              <img class="img-slider-diseno" src="imagenes/ensayo-ultrasonido.svg" alt="">
              <h5>Ultrasonido</h5>
            </div>
          </div>
        </div>
      </div>


<div class="imagenes">
    <div class="imagen-cond" id="imagen-1">
        <img class="img-slider-diseno" src="imagenes/ensayo-analisis-metalograficos.svg" alt="">
    </div>
    <div class="imagen-cond" id="imagen-2">
        <img class="img-slider-diseno" src="imagenes/ensayo-analisis-metalograficos.svg" alt="">
    </div>
    <div class="imagen-cond" id="imagen-3">
        <img class="img-slider-diseno" src="imagenes/ensayo-analisis-metalograficos.svg" alt="">
    </div>
</div> 







1 respuesta 1

3
function ocultarMostrarImagen()
{
    const slider = document.getElementsByClassName('carousel-item');

    for(const i in slider)
    {
        document.getElementById(`imagen-${i}`).style.display = 'none';

        if(slider[i].classList.contains('active'))
        {
            document.getElementById(`imagen-${i}`).style.display = 'block';
        }
    }
}

Esto debería funcionar.

Ten encuenta que debes nombrar a las imagenes desde el 0

ej:

<div class="imagenes">
<div class="imagen-cond" id="imagen-0">
    <img class="img-slider-diseno" src="imagenes/ensayo-analisis-metalograficos.svg" alt="">
</div>
<div class="imagen-cond" id="imagen-1">
    <img class="img-slider-diseno" src="imagenes/ensayo-analisis-metalograficos.svg" alt="">
</div>
<div class="imagen-cond" id="imagen-2">
    <img class="img-slider-diseno" src="imagenes/ensayo-analisis-metalograficos.svg" alt="">
</div>

No tienes que usar la clase elemento-# solo debes conservar el orden el primer slide corresponderá al id imagen-0

1
  • Mucha gracias, me sirvio el 31 jul. 2022 a las 18:14

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.