Why is my bootstrap Carousel not working?

Asked

Viewed 34 times

0

Why my bootstrap Carousel is not working ?

<!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>

bootstrap-4

1 answer

1


Your<div class="carousel-iten active"> is locked in the wrong place, you put all the slides inside it, this is wrong, other detail, by good practice it is convenient to put all the files .JS at the end of the document!

Something else, item is written with M in the end, the correct class is carousel-item and not carousel-iten as it is in your code...

inserir a descrição da imagem aqui

Law the complete documentation of the official Slider https://getbootstrap.com/docs/4.0/components/carousel/

Your code working with the bugs fixed

<!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>

Browser other questions tagged bootstrap-4

You are not signed in. Login or sign up in order to post.