0

Porque meu carousel bootstrap não está funcionando ?

<!DOCTYPE HTML>
<html lang="pt-br">

<head>
	<meta charset="utf-8" />
	<meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport">
	<title>Marcos Briseno - Livros</title>

	<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />
	<script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>

	<script type="text/javascript" src="js/bootstrap.min.js"></script>

</head>

<body>

	<nav class="navbar navbar-expand-lg navbar-dark bg-secondary">
		<div class="container">
			<a class="navbar-brand" href="#">Curso</a>
			<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSite">
				<span class="navbar-toggler-icon"></span>
			</button>

			<div class="collapse navbar-collapse" id="navbarSite">


				<ul class=" navbar-nav mr-auto">
					<li class="nav-item">
						<a class="nav-link" href="#">Inicio</a>
					</li>
					<li class="nav-item">
						<a class="nav-link" href="#">Perfil</a>
					</li>
					<li class="nav-item">
						<a class="nav-link" href="#">Serviços </a>
					</li>
					<li class="nav-item">
						<a class="nav-link" href="#">Depoimentos</a>
					</li>
					<li class="nav-item">
						<a class="nav-link" href="#">Contatos</a>
					</li>
				</ul>
				<ul class="navbar-nav ml-auto">
					<li class="nav-item dropdown">
						<a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown" id="navDrop">
							Social
						</a>
						<div class="dropdown-menu">
							<a class="dropdown-item" href="#">Facebook</a>
							<a class="dropdown-item" href="#">Twitter</a>
							<a class="dropdown-item" href="#">Instagram</a>
						</div>

					</li>

				</ul>
				<form class="form-inline flex-nowrap">
					<input class="form-control ml-lg-4 mr-2 " type="search" placeholder="Buscar...">
					<button class="btn-inline btn-dark" type="submit">OK</button>
				</form>
			</div>
		</div>


	</nav>
	<div id="carouselSite" class="carousel slide" data-ride="carousel">
		<div class="carousel-inner">

			<div class="carousel-iten active">
				"
				<div class="carousel-iten">
					<img src="img/image1.jpg" class="img-fluid d-block">
				</div>
				<div class="carousel-iten">

					<img src="img/image2.jpg" class="img-fluid d-block">
				</div>
				<div class="carousel-iten">

					<img src="img/image3.jpg" class="img-fluid d-block">
				</div>
			</div>

		</div>
	</div>

</body>

</html>

1 Resposta 1

1

Sua<div class="carousel-iten active"> está fechada no lugar errado, vc colocou todos os slides dentro dela, isso é errado, outro detalhe, por boa prática convém colocar todos os arquivos .JS no final do documento!

Outra coisa, item se escreve com M no final, o correto da classe é carousel-item e não carousel-iten como está no seu código...

inserir a descrição da imagem aqui

Lei a documentação completa do Slider oficial https://getbootstrap.com/docs/4.0/components/carousel/

Seu código funcionando com os erros corrigidos

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>Page Title</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" type="text/css" media="screen" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css" />
  <link rel="stylesheet" type="text/css" media="screen" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
<style>
  
</style>
</head>
<body>
  
	<nav class="navbar navbar-expand-lg navbar-dark bg-secondary">
		<div class="container">
			<a class="navbar-brand" href="#">Curso</a>
			<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSite">
				<span class="navbar-toggler-icon"></span>
			</button>

			<div class="collapse navbar-collapse" id="navbarSite">


				<ul class=" navbar-nav mr-auto">
					<li class="nav-item">
						<a class="nav-link" href="#">Inicio</a>
					</li>
					<li class="nav-item">
						<a class="nav-link" href="#">Perfil</a>
					</li>
					<li class="nav-item">
						<a class="nav-link" href="#">Serviços </a>
					</li>
					<li class="nav-item">
						<a class="nav-link" href="#">Depoimentos</a>
					</li>
					<li class="nav-item">
						<a class="nav-link" href="#">Contatos</a>
					</li>
				</ul>
				<ul class="navbar-nav ml-auto">
					<li class="nav-item dropdown">
						<a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown" id="navDrop">
							Social
						</a>
						<div class="dropdown-menu">
							<a class="dropdown-item" href="#">Facebook</a>
							<a class="dropdown-item" href="#">Twitter</a>
							<a class="dropdown-item" href="#">Instagram</a>
						</div>

					</li>

				</ul>
				<form class="form-inline flex-nowrap">
					<input class="form-control ml-lg-4 mr-2 " type="search" placeholder="Buscar...">
					<button class="btn-inline btn-dark" type="submit">OK</button>
				</form>
			</div>
		</div>


  </nav>
  
	<div id="carouselSite" class="carousel slide" data-ride="carousel" data-interval="1000">
		<div class="carousel-inner">
				<div class="carousel-item active">
					<img src="https://unsplash.it/200/100" class="w-100 d-block">
				</div>
				<div class="carousel-item">
					<img src="https://unsplash.it/200/100" class="w-100 d-block">
				</div>
				<div class="carousel-item">
					<img src="https://unsplash.it/200/100" class="w-100 d-block">
				</div>
			
		</div>
  </div>
  


  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
</body>
</html>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .