twitter-bootstrap css - 引导轮播依赖项，需要导入哪些文件才能工作
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22035074/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
css - bootstrap carousel dependencies, what files need to be imported for it to work
提问by Mefhisto1
I have a carousel example from Bootstrap :
我有一个来自 Bootstrap 的轮播示例：
http://getbootstrap.com/javascript/#carousel
http://getbootstrap.com/javascript/#carousel
And I get everything loaded, but it doesn't change images when i click on either the sides or the little buttons in the center
我加载了所有内容，但是当我单击两侧或中心的小按钮时，它不会更改图像
<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>
It's practically the same, however, I think I'm not importing the right files.
它实际上是一样的，但是，我认为我没有导入正确的文件。
Can you tell what do I need to have imported for this too work (aside from bootstrap.css file, which I do)
你能告诉我需要为这个工作导入什么吗（除了 bootstrap.css 文件，我做的）
回答by Nicolai
You forgot to specify idof divwith classcarousel:
it should be the same as data-targetattribute of lielements:
JSFiddle example
您忘记使用轮播指定idof ：它应该与元素的属性相同：
JSFiddle 示例divclassdata-targetli
You also can see in the external files on jsfiddle page the libraries it uses.
您还可以在 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>
回答by JuniorCoder
You have to reference the following three files:
您必须引用以下三个文件：
jQuery
Bootstrap javascript file (.js)
Bootstrap stylesheet file (.css)
It is very important that you reference jQuery BEFORE bootstrap.
在引导之前引用 jQuery 非常重要。
You can alternatively reference them from a CDN. Then you are absolutely sure that you are not having any problems with your local referencing of files.
您也可以从 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>
回答by Rohan Kumar
You need 3 external fileswhich are,
你需要的3 external files是，
Css
css
http://getbootstrap.com/dist/css/bootstrap.min.css
Scripts
脚本
https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js
http://getbootstrap.com/dist/js/bootstrap.min.js
Full Code
完整代码
<!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>
回答by Damon
Late to the party, but when using require, you'll also need the transition.jsfile.
迟到了，但是在使用 require 时，您还需要该transition.js文件。
So this is what your config file would look like...
所以这就是你的配置文件的样子......
js
js
...
'paths': {
'carousel': 'plugins/bootstrap/carousel',
'transition': 'plugins/bootstrap/transition'
},
'shim': {
'carousel': {
'deps': ['jquery', 'transition']
}
...
}
...
Then in your main module you can load it like this:
然后在你的主模块中你可以像这样加载它：
js
js
define([
'carousel'
], function () {
...
});
