Question

我正在尝试实施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">&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>

除旋转木马外，一切似乎都能正确呈现。从阅读Bootstrap页面看来，我需要坚持

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

在某个地方，但我不知道在哪里，如何或为什么。除此之外，在Firefox错误控制台中，我得到了两个错误

$ is undefined

在bootstrap-carousel.js [第125行]和

$ is not a function

在bootstrap-transition.js [第22行]

Answer 1

显然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>中或其他脚本现在。

Answer 2

有同样的问题。

对我来说，我必须使用jQuery 1.7.1，因为1.6.4不起作用。
我必须加入bootstrap-transition

Answer 3

最近有同样的问题，似乎在当前版本的Bootstrap中，你还必须包含一个名为slide的类。

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

Answer 4

你定义为id不是类，所以你应该通过这个jquery代码启动carousel，所以替换

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

而不是

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

Answer 5

我正在使用Django's JQuery（我不知道该版本）并且它无效。但是，它适用于Jquery 1.7.1。

Answer 6

如果你正在努力让Bootstrap旋转木马幻灯片显示工作 - 这是一个带有可定位控件的模板，以及一个跟踪幻灯片的底部的进度导航栏。

[http://codepen.io/TheNickelDime/][1]

public class IntSet{
    private final int MAXALLOWEDSETVALUE=2000;
    private boolean [] data = new boolean[MAXALLOWEDSETVALUE+1];

    public IntSet(int... elts) {
        for(int iteration = 0; iteration < elts.length; iteration++) {
            if(elts[iteration] <= MAXALLOWEDSETVALUE)
            data[elts[iteration]] = true;
        }
    }

    public IntSet(IntSet source){
        System.arraycopy(source.data, 0, this.data, 0, MAXALLOWEDSETVALUE);
    }
    public void setTo(IntSet source){
        System.arraycopy(source.data, 0, this.data, 0, MAXALLOWEDSETVALUE);
    }        

    public IntSet intersectionWith(IntSet other) {
        IntSet newSectionSet = new IntSet(this);
        for(int iteration = 0; iteration < MAXALLOWEDSETVALUE; iteration++) {
            if(newSectionSet.data[iteration] == true && other.data[iteration] == true) {
                newSectionSet.data[iteration] = true;
            }
        }
        return newSectionSet;
    }
}

Bootstrap Carousel不工作

6 个答案: