CSS - 引導旋轉木馬的依賴，需要什麼文件導入爲它工作

而我得到的一切加載，但它不會改變圖像時我點擊中心的邊或小按鈕

<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文件，這是我做的除外）

來源

2014-02-26 Mefhisto1

請看看我的回答如下... – Nicolai

你忘了與class轉盤指定的divid：應該是一樣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>

來源

2014-02-26 08:06:48 Nicolai

工作太需要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

來源

2014-02-26 08:02:13

嗨，謝謝你的回答。我通過require.js加載所有的.js文件（像backbone，jquery等供應商文件）都被加載到require.config中。我如何確保加載了css和bootstrap.js，而無需在require.config中引用它們？或者我應該在那裏引用它們 – Mefhisto1

你必須參考以下三個文件：

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

它您引用的jQuery BEFORE引導是非常重要的。

您也可以從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>

來源

2014-02-26 10:38:55 JuniorCoder

晚會晚了，但使用require時，您還需要transition.js文件。

所以這就是你的配置文件看起來像...

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

然後你的主模塊中，你可以加載它：

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

... 

});

來源

2015-08-01 02:08:24 Damon

CSS - 引導旋轉木馬的依賴，需要什麼文件導入爲它工作

回答

相關問題