Twitter Bootstrap- Ne peut pas obtenir Carousel pour changer l'image

J'ai copié le HTML ci-dessous - je ne sais pas pourquoi, mais quand j'ouvre cela dans un navigateur, il est bloqué sur la première image et ne fera pas de transition ... J'ai inclus tout le code ci-dessous de mon code HTML. Les fichiers CSS et JS sont les fichiers bootstrap génériques fournis.Twitter Bootstrap- Ne peut pas obtenir Carousel pour changer l'image

<!DOCTYPE html> 
<html> 
<head> 
<title>Bootstrap test site</title> 

<link rel="stylesheet" href="css/bootstrap.css" type="text/css"> 

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
<script src="js/bootstrap.js"></script> 

<script> 
    $(document).ready(function(){ 
     $('.carousel').carousel(); 
    }); 
    </script> 



</head> 

<body> 
    <div class="container"> 

    <div class="span8"> <img src="img/logo_title.png"> </div> 

     <div> 

      <div id="this-carousel-id" class="carousel slide"> 
       <div class="carousel-inner"> 
       <div class="item active"> 
        <img src="http://placehold.it/1200x480" alt="" /> 
        <div class="carousel-caption"> 
        <p>Caption text here1</p> 
        </div> 
       </div> 
       <div class="item"> 
        <img src="http://placehold.it/1200x480" alt="" /> 
        <div class="carousel-caption"> 
        <p>Caption text here2</p> 
        </div> 
       </div> 
       <div class="item"> 
        <img src="http://placehold.it/1200x480" alt="" /> 
        <div class="carousel-caption"> 
        <p>Caption text here3</p> 
        </div> 
       </div> 
       <div class="item"> 
        <img src="http://placehold.it/1200x480" alt="" /> 
        <div class="carousel-caption"> 
        <p>Caption text here4</p> 
        </div> 
       </div> 
       </div><!-- /.carousel-inner --> 
       <!-- Next and Previous controls below 
        href values must reference the id for this carousel --> 
       <a class="carousel-control left" href="#this-carousel-id" data-slide="prev">&lsaquo;</a> 
       <a class="carousel-control right" href="#this-carousel-id" data-slide="next">&rsaquo;</a> 
      </div><!-- /.carousel --> 
     </div> 

    </div> 

<script src="js/bootstrap.js"></script> 


</body> 
</html>

Source

2013-03-28 user2219740

Pour l'une des bibliothèques JS dans bootstrap, assurez-vous d'inclure la bibliothèque réelle. Dans votre cas, vous avez omis la bibliothèque du carrousel. Les autres modules d'extension Bootstrap qui nécessitent des fichiers js séparés incluent les modaux, les listes déroulantes et les info-bulles. Ajouter dans:

<script src="/js/bootstrap-carousel.js"></script> 
<script src="/js/jquery.js"></script>

Vous avez inclus également bootstrap.js deux fois.

Source

2013-03-28 13:00:45 munch1324

Où puis-je obtenir ce fichier? Sur le site Bootstrap, il est écrit "Individuels ou compilés Les plugins peuvent être inclus individuellement (bien que certains aient des dépendances requises), ou tous en même temps, bootstrap.js et bootstrap.min.js contiennent tous les plugins dans un seul fichier." Donc; si elle les inclut, pourquoi ai-je besoin d'ajouter un autre fichier? – user2219740

tirez le référentiel github principal git: //github.com/twitter/bootstrap.git ou téléchargez juste ce dont vous avez besoin: https://github.com/twitter/bootstrap/tree/master/js – munch1324

J'ai téléchargé et inclus le fichier et ça ne marche toujours pas. Désolé Im un newb majeur avec JS. @ munch1324 – user2219740

Twitter Bootstrap- Ne peut pas obtenir Carousel pour changer l'image

Répondre

Questions connexes