Bootstrap -Karussell funktioniert nicht
-
27-10-2019 - |
Frage
Ich versuche, das Twitter Bootstrap Carousel zu implementieren, und bisher war ich erfolglos. Ich habe die folgende Seite:
<!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">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</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>
Und alles scheint richtig zu rendern, außer dem Karussell. Aus dem Lesen der Bootstrap -Seite scheint es, dass ich a kleben muss
$('.myCarousel').carousel();
Irgendwo, aber ich habe keine Ahnung, wo, wie oder warum. Darüber hinaus erhalte ich in der Firefox -Fehlerkonsole die beiden Fehler
$ is undefined
in Bootstrap-Carousel.js [Zeile 125] und
$ is not a function
In Bootstrap-Transition.js [Zeile 22
Lösung
Offensichtlich war JQuery nicht richtig geladen.
Laden Sie die beiden Skripte in der Seite an <head>
.
Der Code zum Ausführen des Karussells ist
<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>
Sie können es entweder in die <head>
Nach den beiden anderen Skripten
oder wo die anderen Skripte jetzt sind.
Andere Tipps
Hatte das gleiche Problem.
- Für mich musste ich JQuery 1.7.1 verwenden, da 1.6.4 nicht funktionierte.
- Ich musste einbeziehen Bootstrap-Übersetzung
Vor kurzem hatte es das gleiche Problem, es scheint in der aktuellen Version von Bootstrap zu sein, dass Sie auch eine Klasse namens Slide enthalten müssen.
<div id="myCarousel" class="carousel slide span12">
Sie haben als ID keine Klasse definiert, also sollten Sie mit diesem Code von JQuery Carousel starten. Ersetzen Sie also. Ersetzen Sie also
$('#myCarousel').carousel();
Anstatt von
$('.myCarousel').carousel();
Ich habe benutzt Django's JQuery
(Ich kenne die Version nicht) und sie hat nicht funktioniert. Es funktioniert jedoch mit Jquery 1.7.1
.
Wenn Sie Schwierigkeiten haben, eine Bootstrap -Karussell -Diashow zum Laufen zu bringen - hier finden Sie eine Vorlage mit positionierbaren Steuerelementen und eine Fortschritts -Aterbar unten, die die Folien verfolgt.
[http://codepen.io/thenickeldime/ weibsbildlich
<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>