Bootstrap Carousel不工作
[英]Bootstrap Carousel Not working
問題描述
我正在嘗試實現Twitter Bootstrap輪播，到目前為止我一直沒有成功。 我有以下頁面：
<!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>
除旋轉木馬外，一切似乎都能正確呈現。 從閱讀Bootstrap頁面看來，我需要堅持下去
$('.myCarousel').carousel();
在某個地方，但我不知道在哪里，如何或為什么。 除此之外，在Firefox錯誤控制台中，我得到了兩個錯誤
$ is undefined
在bootstrap-carousel.js [第125行]和
$ is not a function
在bootstrap-transition.js [第22行]
6 個解決方案
解決方案1
9 已采納 2012-02-19 21:45:42
顯然jQuery沒有正確加載。
嘗試在頁面<head>加載兩個腳本。
運行輪播的代碼是
<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>
您可以將其放在另外兩個腳本之后的<head>
或者其他腳本現在的位置。
解決方案2
5 2012-03-25 18:14:59
有同樣的問題。
- 對我來說，我必須使用jQuery 1.7.1，因為1.6.4不起作用。
- 我必須包括bootstrap-transition
解決方案3
3 2012-09-25 23:08:11
最近有同樣的問題，似乎在當前版本的Bootstrap中，你還必須包含一個名為slide的類。
<div id="myCarousel" class="carousel slide span12">
解決方案4
1 2015-04-16 06:39:42
你定義為id不是類，所以你應該通過這個jquery代碼啟動carousel，所以替換
$('#myCarousel').carousel();
代替
$('.myCarousel').carousel();
解決方案5
0 2012-06-23 21:41:32
我正在使用Django's JQuery （我不知道該版本）並且它無法正常工作。 但是，它適用於Jquery 1.7.1 。
解決方案6
0 2017-03-10 00:57:03
如果你正在努力讓Bootstrap旋轉木馬幻燈片顯示工作 - 這是一個帶有可定位控件的模板，以及一個跟蹤幻燈片的底部的進度導航欄。
[ 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>
Bootstrap Carousel模板無法正常工作
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.