3
respostas

Carousel não funciona?

Olá! Estou na aula 4 de bootstrap. E lá fala sobre o carousel. Eu to tentando de todo jeito fazer o carousel funcionar mas ele não funciona. todas as imagens ficam enormes na tela e não entram no esquema de next, mesmo copiando o codigo e fazendo igual ao que o professor fala no video. Percebi que há algumas diferenças entre a versão que o professor cita no video e a disponivel no bootstrap.

Alguém pode me ajudar?

3 respostas

Olá Daniel tudo bem?

Poderia postar seu código aqui para poder te ajudar.

Oi André. Cara, eu consegui com o codigo de resolução do professor. mas ainda não entendi pq não funcionou com o codigo que estava na doc do bootstrap.

'''div id="carouselExampleControls" class="carousel slide" data-ride="carousel"''' '''div class="carousel-inner"''' '''div class="carousel-item active"'''' ''''img src="..." class="d-block w-100" alt="..."'''' '''/div''' '''div class="carousel-item"''' '''img src="..." class="d-block w-100" alt="..."'''' '''/div'''' '''div class="carousel-item"'''' ''img src="..." class="d-block w-100" alt="..."'''' '''/div'''' '''/div'''' <a class="carousel-control-prev" ''''href="#carouselExampleControls" 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="#carouselExampleControls" role="button" data-slide="next"'''' '''span class="carousel-control-next-icon" aria-hidden="true"></span'''' '''span class="sr-only">Next</span'''' </a'''' </div''''

Eu estava usando esse codigo e não estava funcionando.

(não sei se da pra entender, mas eu não sei usar esse negocio de forum ainda kkk

Oi Daniel, para inserir um código clique no botão inserir código logo acima da onde a gente escreve. Para mais formações clique no botão formatação a direita do botão inserir código.

Eu desconfio que você estava olhando a documentação do Bootstrap 4, eles mudaram tudo cara. O código não ficou retrocompatível, no meu trabalho só usamos Bootstrap 3 por motivos de retrocompatibilidade. E não tinha nada de tão novo que justificasse uma mudança para o 4.

Eu arrumei seu código e agora ele está funcionando, dá uma olhada:


<!DOCTYPE html>
<html>
<head>
  <title>Carrosel</title>
  <meta charset="utf-8">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
  <div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
    <div class="carousel-inner">
      <div class="item active">
        <img src="https://cursos.alura.com.br/images/gnarus/logo-alura.svg" style="width:100%;height: 1000px;" alt="alura">
      </div>
      <div class="item">
        <img src="https://www.caelum.com.br/imagens/grupo/caelum-logo.svg" style="width:100%;height: 100%" alt="caelum">
      </div>
      <div class="item">
        <img src="https://www.caelum.com.br/imagens/grupo/c-d-c-logo.svg" style="width:100%;height: 100%" alt="casa do código">
      </div>
  </div>
  <a class="left carousel-control" href="#carouselExampleControls" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#carouselExampleControls" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
  </div>
</body>
</html>

Espero ter ajudado!!!