multiple - carousel jquery
Bootstrap 3 Carousel no funcionará.(SÃ, he cargado jQuery antes de Bootstrap) (4)
Estoy convirtiendo una aplicación en Bootstrap 3. Aquí está el código de mi página de carrusel de muestra, en su totalidad. Sí, he cargado jQuery antes de que Bootstrap.js se cargue. Por alguna razón, el carrusel simplemente no funcionará. Específicamente: los botones anterior / siguiente no funcionan y el carrusel no se desliza automáticamente a la siguiente diapositiva.
Probado contra:
- Safari 6.0.5
- Chrome 28.0.1500.95
- Firefox 23.0
... en Mac OS X 10.8.4
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--[if lt IE 9]>
<script src="" alt-src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="http://code.jquery.com/jquery.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-glyphicons.css" type="text/css">
<title>Carousel Test</title>
<meta name="description" content="">
<meta name="keywords" content="">
<script>
// Added this just so I didn''t have to wait 5 seconds to see if the transition worked. //
$(document).ready(function() {
$(''#Carousel'').carousel({
interval: 1000
});
});
</script>
</head>
<body>
<div id="Carousel" class="carousel slide">
<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="img/Carousel/001.jpg">
</div>
</div>
<div class="carousel-inner">
<div class="item">
<img src="img/Carousel/002.jpg">
</div>
</div>
<div class="carousel-inner">
<div class="item">
<img src="img/Carousel/003.jpg">
</div>
</div>
<a class="left carousel-control" href="#Carousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#Carousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</body>
</html>
¿Alguien tiene una idea de por qué esto no está funcionando?
Esto es para ayudar a alguien que estaba atascado como yo a pesar de escribir todo el código correctamente. Estaba intentando encontrar un error en el código, pero todo estaba bien. Luego revisé mis archivos javascript y noté que de alguna manera su tipo cambiaba a .js.txt . Así que simplemente lo cambié a .js y funcionó.
Feliz codificación!
Hay otro error en este código, que es que no se puede hacer clic en los indicadores del carrusel. Deben ser enlaces que lo lleven al panel apropiado.
Necesita agregar un hashtag al objetivo de datos:
<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>
Para que el control deslizante funcione, debe incluir:
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
en la parte inferior de su documento (antes de la etiqueta de cierre del cuerpo)
Pruebe con un carousel-inner con varios item dentro.
<div id="Carousel" class="carousel slide">
<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="img/Carousel/001.jpg">
</div>
<div class="item">
<img src="img/Carousel/002.jpg">
</div>
<div class="item">
<img src="img/Carousel/003.jpg">
</div>
</div>
<a class="left carousel-control" href="#Carousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#Carousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
Demostración: http://bootply.com/72622