Solucionado
Oi pessoal, tudo bem?
Eu estou tentando e tentando achar o problema, porém não consigo. Ja dei uma olhada no JS, mas como não tenho experiencia, não consegui resolver. Poderiam me ajudar por favor?
Ah sim, eu não sei como se faz para enviar o meu código bonitinho por aqui mesmo. Se puderem me ensinar, porque sempre que vou colar ele aqui, da o limite caracteres, não faço ideia de como mandar corretamente para melhor leitura do meu código, por esse motivo mandei por prints.
Oi Rian, tudo bem?
Você está usando a versão do Bootstrap5. No curso usamos o Bootstrap4, para que tudo funcione como o da instrutora você precisa usar a mesma versão que ela e copiar desse link que mandei.
Então você vai precisar substituir tudo que é do Bootstrap5 e passar pro Bootstrap4.
E para mandar o código aqui você precisa usar a opção de inserir bloco de código </>:
E quando o código for muito grande, você vai precisar dividir nos comentários da postagem.
Um abraço e bons estudos.
Tem alguma maneira do meu carrosel funcionar com a ultima versão do bootstrap? Porque Quando eu for treinar criando meus códigos eu usaria a ultima versão pois ela vem mais atualizada.
Poderia me ajudar, por favor
Consegui achar o erro, e consegui arrumar. Estava nesse detalhe:
Eu tinha que mudar o data-bs-ride="false" para data-bs-ride="carousel" E estipulei esse tempo de 3 segundos. Até ai tudo bem, mas encontrei um outro problema.
Meu carrosel não ajusta a sua imagem devidamente quando diminuo a tela, não está responsivo. E quando coloco o mouse em cima do carousel, ele para, queria uma maneira de que meu carousel parace quando eu clicasse com o mouse em cima. O codigo vai estar no post seguinte.
<!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://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous"> <link rel="stylesheet" type="text/css" href="src/style.css">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<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="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-end" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">inicio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">receitas</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">quem somos</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">contato</a>
</li>
</ul>
</div>
</div>
</nav>
<div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel" data-bs-interval="3000">
<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>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="src/img/carrossel-img1.jpg" class="d-block w-100 carrossel-imagem-um" alt="...">
<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 carrossel-imagem-dois" alt="...">
<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> <title>fruto & fruta</title>
<h2>Receitas para economizar e ganhar saúde</h2>
<h2>Nossas receitas ajudam você a aproveitar melhor os alimentos, economizar, ganhar tempo e praticidade</h2>
<img src="src/img/receita-abacate.jpg" alt="tigela com salada de abacate, vista superior">
<h3>Tigela de abacate</h3>
<p>Receita refrescante e cheia de vitaminas para o seu café da manhã!</p>
<img src="src/img/receita-kiwi.jpg" alt="tigela de mingau com kiwi, vista superior">
<h3>Salada de kiwi</h3>
<p>Receita refrescante e cheia de vitaminas para o seu café da manhã!</p>
<img src="src/img/receita-mix.jpg" alt="prato com mix de vegetais e mão de pessoa adicionando azeite, vista superior">
<h3>Mix de vegetais</h3>
<p>Receita refrescante e cheia de vitaminas para o seu café da manhã!</p>
<img src="src/img/receita-pimentoes.jpg" alt="prato de salada de pimentões com alguns ingredientes ao lado, vista superior">
<h3>Pimentões à Juliana</h3>
<p>Receita refrescante e cheia de vitaminas para o seu café da manhã!</p>
<img src="src/img/receita-oriental.jpg" alt="tigela com salada de vegetais estilo oriental, vista de cima">
<h3>Prato oriental</h3>
<p>Receita refrescante e cheia de vitaminas para o seu café da manhã!</p>
<img src="src/img/receita-beterrabas.jpg" alt="tigela com beterrabas e dentes de alho assados em primeiro plano, com ingredientes ao fundo">
<h3>Beterrabas assadas</h3>
<p>Receita refrescante e cheia de vitaminas para o seu café da manhã!
</p>
<p>contato:<a href="mailto:email@frutafruto.com.br">email@frutafruto.com.br</a></p>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.min.js" integrity="sha384-IDwe1+LCz02ROU9k972gdyvl+AESN10+x7tBKgc9I5HFtuNz0wWnPclzo6p9vxnk" crossorigin="anonymous"></script>
<script src=""></script>
</body>
</html>
Oi Rian, tudo bem?
Infelizmente não conheço o Boostrap5 ainda e aqui só conseguimos dar suporte ao assunto do curso que é a versão 4.
Mas pesquisando na documentação, encontrei essa parte sobre imagens responsivas, você pode dar uma lida e aplicar no seu projeto, é uma ótima maneira de praticar um dia a dia de uma pessoa desenvolvedora.
Eaqui tem um artigo que fala sobre como parar no hover com vários exemplos.
Nesse form você pode sugerir um curso, se você quiser sugerir um curso sobre Boostrap5.
Um abraço e bons estudos.
Oi Lorena, tudo bem sim.
Quanto ao Bootstrap tudo bem, eu ja sugeri este para um dos cursos da alura com o link que voce me encaminhou. Muito obrigado Lorena.
Um abraço.