Bootstrap carrousel ne fonctionne pas

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

  •  27-10-2019
  •  | 
  •  

Question

Je suis en train de mettre en œuvre le carrousel Twitter Bootstrap, et jusqu'à présent j'ai échoué. J'ai la page suivante: 

<!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>

Et tout semble rendre correctement, à l'exception du carrousel. À la lecture de la page Bootstrap, il semble que je dois coller un 

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

quelque part, mais je n'ai pas la moindre idée de l'endroit où, comment ou pourquoi. En plus de cela, dans la console d'erreur Firefox, je reçois deux erreurs 

$ is undefined

en bootstrap-carousel.js [ligne 125] et 

$ is not a function

en bootstrap-transition.js [ligne 22]

Était-ce utile?

La solution

Il est clair que jQuery n'a pas été correctement chargé.
Essayez de charger les deux scripts dans la <head> page.

Le code pour exécuter le carrousel est 

<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>

Vous pouvez le mettre soit dans le <head> après que les deux autres scripts
ou lorsque les autres scripts sont maintenant.

Autres conseils

eu le même problème.

  • Pour moi, je devais utiliser jQuery 1.7.1, comme 1.6.4 n'a pas marché.
  • i devait inclure bootstrap transition

avait récemment le même problème, il semble dans la version actuelle de Bootstrap, vous devez inclure également une classe appelée diapositive. 

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

Vous défini comme id pas une classe, vous devriez commencer par carrousel ce code de jquery, remplacez donc 

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

au lieu de 

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

J'utilisais Django's JQuery (je ne sais pas la version) et il ne fonctionnait pas. Cependant, il fonctionne avec Jquery 1.7.1.

Si vous luttez obtenir un Bootstrap carrousel diaporama au travail - Voici un modèle avec des commandes positionnables et une barre de navigation de progression en bas que les pistes les diapositives.

[ 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>
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top