Question

我有来自Bootstrap的旋转木马示例：

http://getbootstrap.com/javascript/#carousel

我把所有东西都加载了，但是当我点击中间的两侧或小按钮时，它不会改变图像

<div class="carousel slide" data-ride="carousel">
                    <!-- Indicators -->
                    <ol class="carousel-indicators">
                        <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                        <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                    </ol>

                    <!-- Wrapper for slides -->
                    <div class="carousel-inner">
                        <div class="item active">
                            <img src="img1.jpg" style="width:360px;height:360px"/>
                        </div>
                        <div class="item">
                            <img src="img2.jpg" class="img-responsive" />
                        </div>
                    </div>

                    <!-- Controls -->
                    <a class="carousel-control left" href="#carousel-example-generic" data-slide="prev">
                        <span class="icon-prev"></span>
                    </a>
                    <a class="carousel-control right" href="#carousel-example-generic" data-slide="next">
                        <span class="icon-next"></span>
                    </a>

                </div>

实际上它是一样的，但是，我认为我没有导入正确的文件。

你能说出我需要为此导入的内容吗（除了bootstrap.css文件，我这样做）

Answer 1

您忘了将id div与class轮播指定为：它应与data-target元素的li属性相同： JSFiddle example

您还可以在jsfiddle页面的外部文件中看到它使用的库。

<div class="carousel slide" data-ride="carousel" id="carousel-example-generic">
    <!-- Indicators -->
    <ol class="carousel-indicators">
        <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
        <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner">
        <div class="item active">
            <img src="img1.jpg" style="width:360px;height:360px"/>
        </div>
        <div class="item">
           <img src="img2.jpg" class="img-responsive" />
        </div>
    </div>

    <!-- Controls -->
    <a class="carousel-control left" href="#carousel-example-generic" data-slide="prev">
        <span class="icon-prev"></span>
    </a>
    <a class="carousel-control right" href="#carousel-example-generic" data-slide="next">
        <span class="icon-next"></span>
    </a>
</div>

Answer 2

您需要3 external files，

<强>的CSS

http://getbootstrap.com/dist/css/bootstrap.min.css

<强>脚本

https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js
http://getbootstrap.com/dist/js/bootstrap.min.js

完整代码

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Bootstrap Carousel Demo</title>
  <link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.min.css"/>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script>
</head>
<body>
<div data-ride="carousel" class="carousel slide" id="carousel-example-generic">
      <ol class="carousel-indicators">
        <li class="active" data-slide-to="0" data-target="#carousel-example-generic"></li>
        <li data-slide-to="1" data-target="#carousel-example-generic" class=""></li>
        <li data-slide-to="2" data-target="#carousel-example-generic" class=""></li>
      </ol>
      <div class="carousel-inner">
        <div class="item active">
          <img alt="First slide" data-src="holder.js/900x500/auto/#777:#555/text:First slide" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI5MDAiIGhlaWdodD0iNTAwIj48cmVjdCB3aWR0aD0iOTAwIiBoZWlnaHQ9IjUwMCIgZmlsbD0iIzc3NyIvPjx0ZXh0IHRleHQtYW5jaG9yPSJtaWRkbGUiIHg9IjQ1MCIgeT0iMjUwIiBzdHlsZT0iZmlsbDojNTU1O2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1zaXplOjU2cHg7Zm9udC1mYW1pbHk6QXJpYWwsSGVsdmV0aWNhLHNhbnMtc2VyaWY7ZG9taW5hbnQtYmFzZWxpbmU6Y2VudHJhbCI+Rmlyc3Qgc2xpZGU8L3RleHQ+PC9zdmc+">
        </div>
        <div class="item">
          <img alt="Second slide" data-src="holder.js/900x500/auto/#666:#444/text:Second slide" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI5MDAiIGhlaWdodD0iNTAwIj48cmVjdCB3aWR0aD0iOTAwIiBoZWlnaHQ9IjUwMCIgZmlsbD0iIzY2NiIvPjx0ZXh0IHRleHQtYW5jaG9yPSJtaWRkbGUiIHg9IjQ1MCIgeT0iMjUwIiBzdHlsZT0iZmlsbDojNDQ0O2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1zaXplOjU2cHg7Zm9udC1mYW1pbHk6QXJpYWwsSGVsdmV0aWNhLHNhbnMtc2VyaWY7ZG9taW5hbnQtYmFzZWxpbmU6Y2VudHJhbCI+U2Vjb25kIHNsaWRlPC90ZXh0Pjwvc3ZnPg==">
        </div>
        <div class="item">
          <img alt="Third slide" data-src="holder.js/900x500/auto/#555:#333/text:Third slide" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI5MDAiIGhlaWdodD0iNTAwIj48cmVjdCB3aWR0aD0iOTAwIiBoZWlnaHQ9IjUwMCIgZmlsbD0iIzU1NSIvPjx0ZXh0IHRleHQtYW5jaG9yPSJtaWRkbGUiIHg9IjQ1MCIgeT0iMjUwIiBzdHlsZT0iZmlsbDojMzMzO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1zaXplOjU2cHg7Zm9udC1mYW1pbHk6QXJpYWwsSGVsdmV0aWNhLHNhbnMtc2VyaWY7ZG9taW5hbnQtYmFzZWxpbmU6Y2VudHJhbCI+VGhpcmQgc2xpZGU8L3RleHQ+PC9zdmc+">
        </div>
      </div>
      <a data-slide="prev" href="#carousel-example-generic" class="left carousel-control">
        <span class="glyphicon glyphicon-chevron-left"></span>
      </a>
      <a data-slide="next" href="#carousel-example-generic" class="right carousel-control">
        <span class="glyphicon glyphicon-chevron-right"></span>
      </a>
    </div>
</body>
</html>

<强> Live Demo

Answer 3

您必须参考以下三个文件：

jQuery  
Bootstrap javascript file (.js) 
Bootstrap stylesheet file (.css)

引用jQuery BEFORE bootstrap非常重要。

您也可以从CDN引用它们。那么你绝对相信你的本地文件引用没有任何问题。

 <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
 <script src=="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js type="text/javascript"></script>
 <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js" type="text/javascript"></script>

Answer 4

晚会，但在使用require时，您还需要transition.js文件。

所以这就是你的配置文件的样子......

<强> JS

...
'paths': {
     'carousel': 'plugins/bootstrap/carousel',
     'transition': 'plugins/bootstrap/transition'
},
'shim': {
    'carousel': {
        'deps': ['jquery', 'transition']
    }
...
}
...

然后在您的主模块中，您可以像这样加载它：

<强> JS

define([
    'carousel'
], function () {

...

});

css - bootstrap carousel依赖项，需要导入哪些文件才能工作

4 个答案: