4
respostas

[Dúvida] estudos do bootStrap meu carrosel não funciona

Referente ao curso Bootstrap 4: criando uma landing page responsiva, no capítulo Adicionando o carrossel e resolvendo bugs e atividade Faça como eu fiz na aula

por Luciano
| 126k xp | 65 posts

ja revisei, mas o carrosel não funciona, a primeira imagem aparece, quando clico no next não passa para próxima imagem, tentei verificar se tem alguma coisa desabilitando, mas não achei.

<nav class="navbar navbar-expand-lg bg-body-tertiary ">
      <div class="container-fluid">
        <a class="navbar-brand" href="#">fruta & fruto</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
          <div class="collapse navbar-collapse justify-content-end"  id="navbarNavAltMarkup">
            <div class="navbar-nav">
              <a class="nav-link active" aria-current="page" href="#">inicio</a>
              <a class="nav-link" href="#">receitas</a>
              <a class="nav-link" href="#">quem somos</a>
              <a class="nav-link" href="#">contato</a>
            </div>
          </div>
      </div>
    </nav>



    <div class="bd-example">
      <div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
        <ol class="carousel-indicators">
          <li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
          <li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
          <li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
        </ol>
        <div class="carousel-inner">
          <div class="carousel-item active">
            <img src="src/img/carrossel-img1.jpg" class="d-block w-100" alt="fruta">
            <div class="carousel-caption d-none d-md-block">
              <h1>Reaproveite melhor os alimentos!</h1>
            </div>
          </div>
          <div class="carousel-item">
            <img src="src/img/carrossel-img2.jpg" class="d-block w-100" alt="grões">
            <div class="carousel-caption d-none d-md-block">
              <h1>Economize e ganhe em saúde!</h1>

            </div>
          </div>
4 respostas
por RODRIGO SILVA HARDER
| 1864.1k xp | 4076 posts
Alura Scuba Team Monitor de Fórum Ops

Oi, Luciano, tudo bem?

Desculpe a demora em te responder!

Muito obrigado por compartilhar o seu código. Ao verificar os comandos referentes ao carrossel, percebi que falta uma parte do código após a tag <h1> que traz a frase "Economize e ganhe em saúde", que diz respeito aos botões responsáveis pela alternância das duas imagens utilizadas.

<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
</button>

Além da adição da parte inferior referente aos botões também é necessário realizar a remoção de um dos itens da lista bem no início do código, pois há apenas duas imagens e no exemplo fornecido pela documentação do Bootstrap há três itens de imagem.

Por fim, precisamos modificar o nome da classe data-slide-to para data-bs-slide-to devido a atualizações do Bootstrap.

<ol class="carousel-indicators">
    <li data-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active"></li>
    <li data-target="#carouselExampleCaptions" data-bs-slide-to="1"></li>
</ol>

O código completo com todas as alterações está abaixo:

   <div class="bd-example">
        <div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
          <ol class="carousel-indicators">
            <li data-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active"></li>
            <li data-target="#carouselExampleCaptions" data-bs-slide-to="1"></li>
          </ol>
          <div class="carousel-inner">
            <div class="carousel-item active">
              <img src="src/img/carrossel-img1.jpg" class="d-block w-100" alt="fruta">
              <div class="carousel-caption d-none d-md-block">
                <h1>Reaproveite melhor os alimentos!</h1>
              </div>
            </div>
            <div class="carousel-item">
              <img src="src/img/carrossel-img2.jpg" class="d-block w-100" alt="grões">
              <div class="carousel-caption d-none d-md-block">
                <h1>Economize e ganhe em saúde!</h1>
              </div>
            </div>
        </div>
        <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Previous</span>
        </button>
        <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Next</span>
        </button>
    </div>

Espero ter ajudado, caso tenha dúvidas, estarei à disposição.

Abraços e bons estudos!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!
por Luciano
| 126k xp | 65 posts

fala Rodrigo, bem site do bootstrap o carousel venho não com buttom, venho como link, usei o mesmo bootstrap da instrudora, bootstrap@4.3.1, vou mudar para vê se da certo

 <a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-slide="prev">
          <span class="carousel-control-prev-icon" aria-hidden="true"></span>
          <span class="sr-only">Previous</span>
        </a>
        <a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-slide="next">
          <span class="carousel-control-next-icon" aria-hidden="true"></span>
          <span class="sr-only">Next</span>
        </a>
por Luciano
| 126k xp | 65 posts

mudei para button e nada, vou postar o header e o carousel o código.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>fruta e fruto</title>
  <link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <link rel="stylesheet" type="text/css" href="src/style.css"> 
</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
      <a class="navbar-brand" href="#">frutos & frutas</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
      </button>
        <div class="collapse navbar-collapse justify-content-end" id="navbarNavAltMarkup">
          <div class="navbar-nav ">
            <a class="nav-item nav-link active" href="#">início<span class="sr-only">(current)</span></a>
            <a class="nav-item nav-link" href="#">receita</a>
            <a class="nav-item nav-link" href="#">quem sonos</a>
            <a class="nav-item nav-link" href="#">contato</a>
          </div>
        </div>
    </nav>

    <div class="bd-example">
      <div id="carouselExampleCaptions" class="carousel slide" data-interval="1000" data-ride="carousel">
        <ol class="carousel-indicators">
          <li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
          <li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
          <!-- <li data-target="#carouselExampleCaptions" data-slide-to="2"></li> -->
        </ol>
        <div class="carousel-inner">
          <div class="carousel-item active">
            <img  src="src/img/carrossel-img1.jpg" class="d-block w-100 imagem-corrossel-um" alt="...">
            <div class="carousel-caption d-none d-md-block h-50">
              <h1 class="fonte-titulo">Reaproveite melhor os alimentos!</h1>
            </div>
          </div>
          <div class="carousel-item">
            <img  src="src/img/carrossel-img2.jpg" class="d-block w-100 imagem-corrossel-dois" alt="...">
            <div class="carousel-caption d-none d-md-block h-50">
              <h1 class="fonte-titulo">Economize e ganhe em saúde!</h1>
            </div>
          </div>
        </div>
        <a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-slide="prev">
          <span class="carousel-control-prev-icon" aria-hidden="true"></span>
          <span class="sr-only">Previous</span>
        </a>
        <a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-slide="next">
          <span class="carousel-control-next-icon" aria-hidden="true"></span>
          <span class="sr-only">Next</span>
        </a>
      </div>
    </div>
por RODRIGO SILVA HARDER
| 1864.1k xp | 4076 posts
Alura Scuba Team Monitor de Fórum Ops

Oi, Luciano, tudo bem?

Sinto muito que ainda esteja tendo dificuldades em fazer o carrossel funcionar, mas vamos juntos solucionar esse problema.

Por conta das atualizações realizadas no Bootstrap, algumas estruturas foram modificadas e alguns seletores tiveram seus nomes alterados. Dessa forma, alguns comandos utilizados para realizar o seu carrossel, não estão funcionais, como os botões responsáveis por trocar as imagens.

Dito isso, podemos resolver o seu problema realizando alterações no código para atualizar as referências nas classes e estrutura do Bootstrap. Assim, o comando seria escrito da seguinte maneira:

<div class="bd-example">
    <div id="carouselExampleCaptions" class="carousel slide" data-bs-interval="1000" data-bs-ride="carousel">
        <ol class="carousel-indicators">
            <li data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active"></li>
            <li data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1"></li>
            <!-- <li data-target="#carouselExampleCaptions" data-slide-to="2"></li> -->
        </ol>
        <div class="carousel-inner">
            <div class="carousel-item active">
              <img  src="src/img/carrossel-img1.jpg" class="d-block w-100 imagem-corrossel-um" alt="...">
              <div class="carousel-caption d-none d-md-block h-50">
                <h1 class="fonte-titulo">Reaproveite melhor os alimentos!</h1>
              </div>
            </div>
            <div class="carousel-item">
              <img  src="src/img/carrossel-img2.jpg" class="d-block w-100 imagem-corrossel-dois" alt="...">
              <div class="carousel-caption d-none d-md-block h-50">
              <h1 class="fonte-titulo">Economize e ganhe em saúde!</h1>
            </div>
            </div>
        </div>
        <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Previous</span>
        </button>
        <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Next</span>
        </button>
    </div>
</div>

Perceba que as alterações em sua maioria estão concentradas nos data-attributes, que passam a contar com o acréscimo de um "bs" em sua estrutura, como, por exemplo, o data-attribute data-slide que passou a ter a nomenclatura data-bs-slide.

Caso queira ver outras estruturas de carrossel do Bootstrap, recomendo a documentação abaixo.

Espero que dê tudo certo e caso tenha dúvidas, estarei à disposição.

Abraços e bons estudos!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software