Bootstrap Carrusel No funciona

Estoy intentando implementar el carrusel de Twitter Bootstrap, y hasta ahora no he tenido éxito. Tengo la siguiente página:Bootstrap Carrusel No funciona

<!DOCTYPE html> 
<html lang = "en"> 
<head> 
    <meta charset="utf-8"> 
    <title>Fluxware: Play, learn and build games</title> 
    <meta name="description" content="Home page for Fluxware"> 
    <meta name="author" content="Tim Butram"> 

    <!-- CSS Stylesheets --> 
    <link href="../bootstrap/css/bootstrap.css" rel="stylesheet"> 

    <link href="../bootstrap/css/bootstrap-responsive.css" rel="stylesheet"> 

    <!--For shitty webbrowsers --> 
    <!--[if lt IE 9]> 
    <script src="//html5shim.googlecode.com/sbn/trunk/html5.js></script> 
    <![endif]--> 

    <!-- Favicon --> 
    <link rel="favicon" href="images/favicon.ico"> 
</head> 

<body> 

    <!-- Navbar --> 

    <div class="navbar"> 
    <div class="navbar-inner"> 
     <div class="container"> 
     <ul class="nav"> 
      <li class="active"><a href="#">Home</a></li> 
      <li><a href="#">Play</a></li> 
      <li><a href="#">Learn</a></li> 

      <li><a href="#">Build</a></li> 
     </ul> 
     </div> 
    </div> 
    </div> 

    <!-- Grid --> 
    <div class="container"> 
    <div class="row"> 

    <div class="span12"> 
     <div class="hero-unit"> 
    <div id="myCarousel" class="carousel"> 
      <div class="carousel-inner"> 
      <div class="active item"><img src="/images/1.png" /></div> 
     <div class="item"><img src="./images/2.png" /></div> 
     <div class="item"><img src="./images/3.png" /></div> 
      </div> 

     <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a> 
     <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a> 
     </div> 
     </div> 

     <div class="row"> 
     <div class="span4"> 
      <a class="btn btn-large">Play</a> 
     <p>Play games created with Fluxware.</p> 

     </div> 

    <div class="span4"> 
     <a class="btn btn-large">Learn</a> 
     <p>Learn how to create games and game assets</p> 
    </div> 

    <div class="span4"> 
      <a class="btn btn-large">Build</a> 

     <p>Use the Fluxware tools to create game.</p> 
     </div> 
     </div> 
    </div> 
    </div> 
    </div> 
    <script src="../bootstrap/js/jquery.js"></script> 
    <script src="../bootstrap/js/bootstrap-carousel.js"></script> 

    <script src="../bootstrap/js/bootstrap-transition.js"></script> 
</body> 
</html>

Y todo parece funcionar correctamente, a excepción del carrusel. De la lectura de la página Bootstrap, parece que tengo que pegar un

$('.myCarousel').carousel();

en alguna parte, pero no tengo ni idea de dónde, cómo o por qué. Además de eso, en la consola de errores de Firefox, consigo los dos errores

$ is undefined

de arranque-carousel.js [125] y de línea

$ is not a function

de arranque-transition.js [línea 22 ]

Fuente

2012-02-19 Atrus

Por lo que entiendo, $ ('carrusel') del carrusel(); es jQuery para llamar al método de carrusel en el DIV con id = carrusel. Entonces, puse eso en un script en la parte inferior.Desafortunadamente, eso no pareció hacer nada, excepto por la creación de otro error de '$ no definido' – Atrus

Claramente, jQuery no se cargó correctamente.
Intente cargar los dos scripts en la página <head>.

El código para ejecutar el carrusel es

<script> 
// Load this when the DOM is ready 
$(function(){ 
    // You used .myCarousel here. 
    // That's the class selector not the id selector, 
    // which is #myCarousel 
    $('#myCarousel').carousel(); 
}); 
</script>

puede ponerlo ya sea en el <head> después de que los otros dos guiones
o cuando los demás guiones están ahora.

Fuente

2012-02-19 21:45:42 TheShellfishMeme

Ugh. Tiene razón en que jQuery no se estaba cargando correctamente. Ni siquiera estaba allí. Gracias por la ayuda con la ubicación de mi js snippet. – Atrus

Tenía el mismo problema.

Para mí tuve que usar jQuery 1.7.1, ya que 1.6.4 no funcionó.
he tenido que incluir bootstrap-transition

Fuente

2012-03-25 18:14:59 alex

que estaba usando Django's JQuery (no sé la versión) y no estaba trabajando. Sin embargo, funciona con Jquery 1.7.1.

Fuente

2012-06-23 21:41:32

Recientemente tuve el mismo problema, parece que en la versión actual de Bootstrap, también debe incluir una clase llamada diapositiva.

<div id="myCarousel" class="carousel slide span12">

Fuente

2012-09-25 23:08:11

Se define como identificación no es una clase, por lo que debe comenzar carrusel por este código de jQuery, por lo reemplace

$('#myCarousel').carousel();

en lugar de

$('.myCarousel').carousel();

Fuente

2015-04-16 06:39:42 Mohamm6d

Si usted está luchando conseguir una presentación de diapositivas del carrusel de Bootstrap para funcionar - Aquí hay una plantilla con controles posicionables y una barra de navegación de progreso en la parte inferior que rastrea las diapositivas. .

[http://codepen.io/TheNickelDime/][1]

<div class="Slideshow_carousel-wrapper container-fluid"> 
    <span class="Slideshow-ctl-L" onclick="carousel_left()"></span> 
    <div class="carousel slide" data-ride="carousel" ... </div>  
    <span class="Slideshow-ctl-R" onclick="carousel_right()"></span> 

</div> 

    <div class="container-fluid Slideshow_progress-bar">  
     <ul id="slideshow_progress" class="Slideshow_progress"></ul> 
    </div>

Fuente

2017-03-10 00:57:03 TheNickelDime

Bootstrap Carrusel No funciona

Respuesta

Cuestiones relacionadas