Bootstrap 轮播不工作，需要 javascript 代码吗？
Bootstrap Carousel not working, does it need javascript code?
我在 Bootstrap 页面示例中复制了 Carousel，但它根本不起作用。幻灯片不起作用，它始终保持在第一张图像中。我应该添加一些 Javascript 吗？我将 jquery cdn 放在 bootstrap cdn 之上，正如我在许多关于可能的解决方案的帖子中看到的那样，但它仍然无法正常工作。下面是html代码。
<!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>
尝试从 bootstrap 入门页面复制 'CSS' link 并复制到 head 标签中，而 JS 脚本应该在 body 标签之后。关注此 link 以获得更多了解。
将css个文件添加到
这样的标签
<head>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
并且始终将 js 文件放在 html 代码底部的标记
之后
.
.
.
</body>
<script defer src="variables.js"></script>
<script defer src="cotizadordeauto.js"></script>
</html>
只需将图像文件更改为您的！
此代码对我很有效：
<!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>```
我在 Bootstrap 页面示例中复制了 Carousel，但它根本不起作用。幻灯片不起作用，它始终保持在第一张图像中。我应该添加一些 Javascript 吗？我将 jquery cdn 放在 bootstrap cdn 之上，正如我在许多关于可能的解决方案的帖子中看到的那样，但它仍然无法正常工作。下面是html代码。
<!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>
尝试从 bootstrap 入门页面复制 'CSS' link 并复制到 head 标签中，而 JS 脚本应该在 body 标签之后。关注此 link 以获得更多了解。
将css个文件添加到
这样的标签<head>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
并且始终将 js 文件放在 html 代码底部的标记
之后 .
.
.
</body>
<script defer src="variables.js"></script>
<script defer src="cotizadordeauto.js"></script>
</html>
只需将图像文件更改为您的！
此代码对我很有效：
<!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>```