问题
I did an exact copy of the Carousel at the Bootstrap page example but it does not work at all. The slide does not work, it keeps in the first image always. Should I add some Javascript? I put the jquery cdn on top of the bootstrap cdn as I saw in many posts about a possible solution, but it still no working. Below it is the html code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cotizador de Seguros</title>
<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="Style.css">
<script defer src="variables.js"></script>
<script defer src="cotizadordeauto.js"></script>
</head>
<body>
<nav>
<div class="topnav">
<img src="imagenes/ooo.jpg" alt="sol">
<span class="navbar-brand">Seguros Sunshine</span>
</div>
</nav>
<div>
<h2>En Seguros Sunshine tenemos muchas opciones para vos</h2>
</div>
<p id="todaInfo"></p>
<div class="container" id="preguntas">
<br>
<br>
<h3>Ingresa tus datos para iniciar una cotizacion</h3>
<table class="table table-striped">
<thead>
<input type="text" id="nombre" class="no-outline" placeholder="Nombre">
<input type="number" id="edad" class="no-outline" placeholder="Edad">
<input type="email" id="email" class="no-outline" placeholder="Email">
<input type="tel" id="telefono" class="no-outline" placeholder="Telefono">
<div>
<button onclick="Guardar()" id="guardado">Guardar</button>
</div>
</thead>
<tbody id="info" class="shadow">
</tbody>
</table>
</div>
<br>
<div class="container shadow col-lg-6">
<div id="contenido" class="pb-auto" style="display: none">
<header class="p-3 bg-info text-white text-uppercase rounded">
<h1 class="text-center">Cotiza tu auto aqui</h1>
</header>
<form class="mt-10 max-width mx-auto" action="#" id="cotizar-seguro">
<div class="d-flex align-items-center mb-5">
<label class="font-weight-bold text-uppercase mr-3 w-20" for="marca">Marca:</label>
<select class="d-flex mt-2 p-3 rounded" id="marca">
<option value="" disabled selected> Seleccionar </option>
</select>
<label class="font-weight-bold text-uppercase ml-auto mr-3 w-20" for="marca">Modelo:</label>
<select class="d-flex mt-2 p-3 rounded" id="modelo">
<option value="" disabled selected> Seleccionar </option>
</select>
</div>
<div class="d-flex justify-content-around align-items-center mb-5">
<label class="font-weight-bold text-uppercase mr-3 w-20" for="year">Año:</label>
<select class="d-flex p-3 rounded" id="year">
<option value="" disabled selected> Seleccionar </option>
</select>
<label class="font-weight-bold text-uppercase ml-auto mr-3" for="color">Color:</label>
<input type="text" class="d-flex p-3 rounded" id="color" placeholder="El color es opcional">
</div>
<fieldset>
<legend class="font-weight-bold text-uppercase text-center w-full">Tipo Seguro</legend>
<div class="d-flex justify-content-around mt-5">
<div>
<label class="font-weight-bold text-uppercase mr-2">Terceros</label>
<input type="radio" name="tipo" value="terceros" checked>
</label>
</div>
<div>
<label class="font-weight-bold text-uppercase mr-2">Terceros Ampliada</label>
<input type="radio" name="tipo" value="terceros-ampliada">
</label>
</div>
<div>
<label class="font-weight-bold text-uppercase mr-2">Todo Riesgo</label>
<input type="radio" name="tipo" value="todo-riesgo">
</label>
</div>
</div>
</fieldset>
<div id="cargando" style="display: none">
<div class="spinner">
<div class="bounce1"></div>
<div class="bounce2"></div>
<div class="bounce3"></div>
</div>
</div>
<div id="resultado"></div>
<div class="d-flex justify-content-center py-4">
<button type="submit" class="mx-auto bg-info hover text-white font-weight-bold py-2 px-20 rounded">Cotizar Seguro
</button>
</div>
</form>
</div>
</div>
<!--Cierre del form y container-->
<br>
<div>
<br>
<div id="carouselSeguro" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="imagenes/grua.jpg" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="imagenes/mapa.jpg" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="imagenes/online.jpg" alt="Third slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" 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="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</body>
</html>回答1:
Just change image file to yours!
This code works well for me:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cotizador de Seguros</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<nav>
<div class="topnav">
<img src="imagenes/ooo.jpg" alt="sol">
<span class="navbar-brand">Seguros Sunshine</span>
</div>
</nav>
<div>
<h2>En Seguros Sunshine tenemos muchas opciones para vos</h2>
</div>
<p id="todaInfo"></p>
<div class="container" id="preguntas">
<br>
<br>
<h3>Ingresa tus datos para iniciar una cotizacion</h3>
<table class="table table-striped">
<thead>
<input type="text" id="nombre" class="no-outline" placeholder="Nombre">
<input type="number" id="edad" class="no-outline" placeholder="Edad">
<input type="email" id="email" class="no-outline" placeholder="Email">
<input type="tel" id="telefono" class="no-outline" placeholder="Telefono">
<div>
<button onclick="Guardar()" id="guardado">Guardar</button>
</div>
</thead>
<tbody id="info" class="shadow">
</tbody>
</table>
</div>
<br>
<div class="container shadow col-lg-6">
<div id="contenido" class="pb-auto" style="display: none">
<header class="p-3 bg-info text-white text-uppercase rounded">
<h1 class="text-center">Cotiza tu auto aqui</h1>
</header>
<form class="mt-10 max-width mx-auto" action="#" id="cotizar-seguro">
<div class="d-flex align-items-center mb-5">
<label class="font-weight-bold text-uppercase mr-3 w-20" for="marca">Marca:</label>
<select class="d-flex mt-2 p-3 rounded" id="marca">
<option value="" disabled selected> Seleccionar </option>
</select>
<label class="font-weight-bold text-uppercase ml-auto mr-3 w-20" for="marca">Modelo:</label>
<select class="d-flex mt-2 p-3 rounded" id="modelo">
<option value="" disabled selected> Seleccionar </option>
</select>
</div>
<div class="d-flex justify-content-around align-items-center mb-5">
<label class="font-weight-bold text-uppercase mr-3 w-20" for="year">Año:</label>
<select class="d-flex p-3 rounded" id="year">
<option value="" disabled selected> Seleccionar </option>
</select>
<label class="font-weight-bold text-uppercase ml-auto mr-3" for="color">Color:</label>
<input type="text" class="d-flex p-3 rounded" id="color" placeholder="El color es opcional">
</div>
<fieldset>
<legend class="font-weight-bold text-uppercase text-center w-full">Tipo Seguro</legend>
<div class="d-flex justify-content-around mt-5">
<div>
<label class="font-weight-bold text-uppercase mr-2">Terceros</label>
<input type="radio" name="tipo" value="terceros" checked>
</label>
</div>
<div>
<label class="font-weight-bold text-uppercase mr-2">Terceros Ampliada</label>
<input type="radio" name="tipo" value="terceros-ampliada">
</label>
</div>
<div>
<label class="font-weight-bold text-uppercase mr-2">Todo Riesgo</label>
<input type="radio" name="tipo" value="todo-riesgo">
</label>
</div>
</div>
</fieldset>
<div id="cargando" style="display: none">
<div class="spinner">
<div class="bounce1"></div>
<div class="bounce2"></div>
<div class="bounce3"></div>
</div>
</div>
<div id="resultado"></div>
<div class="d-flex justify-content-center py-4">
<button type="submit"
class="mx-auto bg-info hover text-white font-weight-bold py-2 px-20 rounded">Cotizar Seguro
</button>
</div>
</form>
</div>
</div>
<!--Cierre del form y container-->
<br>
<div class="container">
<div id="carouselSeguro" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel" data-slide-to="0" class="active"></li>
<li data-target="#carousel" data-slide-to="1"></li>
<li data-target="#carousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="pikachu.jpg" alt="First slide" style="width: 50%; height: 50%">
</div>
<div class="item">
<img src="pikachu.jpg" alt="Second slide" style="width: 50% ; height: 50%">
</div>
<div class="item">
<img src="pikachu.jpg" alt="Third slide" style="width: 50%; height: 50%">
</div>
</div>
<a class="left carousel-control" href="#carousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</body>
</html>```
回答2:
Try copying 'CSS' link from bootstrap getting started page and copy in head tag and while JS scripts should be after body tag. follow this link to have more understanding.
回答3:
Add css files to the tag like
<head>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
and always put js files at the bottom of your html code after tag
.
.
.
</body>
<script defer src="variables.js"></script>
<script defer src="cotizadordeauto.js"></script>
</html>
来源：https://stackoverflow.com/questions/64149455/bootstrap-carousel-not-working-does-it-need-javascript-code