Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

[Dúvida] Não consigo utilizar dois Carousel com Bootstrap.

Estou querendo utilizar dois Carousel com o Bootstrap, porém quando coloco os dois Carousel, os botões do segundo carousel ativa o primeiro carousel. Alguém consegue me ajudar?

Vou deixar o link aberto para comentários no drive.

Desde já agradeço.

Link google drive: https://docs.google.com/document/d/1zVqwJAijCg1hiP0-G9W2kBgSsh7uqI7xxk-_0PPfZVs/edit?usp=sharing

1 resposta
solução!

Oi, Jean

Os dois "Carousel" estavam com a mesma identificação ( id )

Alterações no segundo "Carousel":

  • id="carouselExampleCaptions2"
  • data-bs-target="#carouselExampleCaptions2"

  <!-- Segundo Carousel -->
  <div>
    <div id="carouselExampleCaptions2" class="carousel slide container">
      <div class="carousel-indicators">
        <button type="button" data-bs-target="#carouselExampleCaptions2" data-bs-slide-to="0" class="active"
          aria-label="Slide 1" aria-current="true"></button>
        <button type="button" data-bs-target="#carouselExampleCaptions2" data-bs-slide-to="1" aria-label="Slide 2"
          class=""></button>
        <button type="button" data-bs-target="#carouselExampleCaptions2" data-bs-slide-to="2"
          aria-label="Slide 3"></button>
      </div>
      <div class="carousel-inner">
        <div class="carousel-item active">
          <svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400"
            xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Espaço reservado: primeiro slide"
            preserveAspectRatio="xMidYMid slice" focusable="false">
            <title>Placeholder</title>
            <rect width="100%" height="100%" fill="#777"></rect>
            <text x="50%" y="50%" fill="#555"
              dy=".3em">First
              slide
            </text>
          </svg>
          <div class="carousel-caption">
            <h5>
              <font style="vertical-align: inherit;">
              <font style="vertical-align: inherit;">Rótulo do primeiro slide</font>
              </font>
            </h5>
          </div>
        </div>
        <div class="carousel-item">
          <svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400"
            xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Espaço reservado: segundo slide"
            preserveAspectRatio="xMidYMid slice" focusable="false">
            <title>Placeholder</title>
            <rect width="100%" height="100%" fill="#666"></rect>
            <text x="50%" y="50%" fill="#444"
              dy=".3em">Second
              slide
            </text>
          </svg>
          <div class="carousel-caption">
            <h5>
              <font style="vertical-align: inherit;">
              <font style="vertical-align: inherit;">Rótulo do segundo slide</font>
              </font>
            </h5>
          </div>
        </div>
        <div class="carousel-item">
          <svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400"
            xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Espaço reservado: terceiro slide"
            preserveAspectRatio="xMidYMid slice" focusable="false">
            <title>Placeholder</title>
            <rect width="100%" height="100%" fill="#555"></rect>
            <text x="50%" y="50%" fill="#333"
              dy=".3em">Third
              slide
            </text>
          </svg>
          <div class="carousel-caption">
            <h5>
              <font style="vertical-align: inherit;">
              <font style="vertical-align: inherit;">Etiqueta do terceiro slide</font>
              </font>
            </h5>
          </div>
        </div>
      </div>
      <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions2"
        data-bs-slide="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="visually-hidden">
      <font style="vertical-align: inherit;">
      <font style="vertical-align: inherit;">Anterior</font>
      </font>
      </span>
      </button>
      <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions2"
        data-bs-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="visually-hidden">
      <font style="vertical-align: inherit;">
      <font style="vertical-align: inherit;">Próximo</font>
      </font>
      </span>
      </button>
    </div>
  </div>
Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!