Bootstrap carrusel no funciona

StackOverflow https://stackoverflow.com/questions/9353294

  •  27-10-2019
  •  | 
  •  

Pregunta

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

<!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 volverse correctamente, excepto el carrusel. Al leer la página de bootstrap, parece que necesito pegar un

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

En algún lugar, pero no tengo idea de dónde, cómo o por qué. Además de eso, en la consola de error de Firefox, recibo los dos errores

$ is undefined

en bootstrap-carousel.js [línea 125] y

$ is not a function

En Bootstrap-Transition.js [Línea 22

¿Fue útil?

Solución

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>

Puedes ponerlo en el <head> Después de los otros dos guiones
o donde están ahora los otros scripts.

Otros consejos

Tenía el mismo problema.

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

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

Definido como ID, no como una clase, por lo que debe comenzar el carrusel por este código de jQuery, así que reemplace 

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

en vez de

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

Estaba usando Django's JQuery (No conozco la versión) y no estaba funcionando. Sin embargo, funciona con Jquery 1.7.1.

Si está luchando para que funcione una presentación de diapositivas de carrusel de bootstrap, 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/font>igh1

<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>
Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top