为什么从Twitter Bootstrap的轮播不适合我？ [英] Why is the carousel from Twitter Bootstrap not working for me?
问题描述
我有以下代码：
<html>
<head>
<link href="css/bootstrap.min.css" rel="stylesheet" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script>
$(document).ready(function(){
$('.carousel').carousel();
});
</script>
</head>
<body>
<div id="welcome-carousel" class="carousel slide"><!-- class of slide for animation -->
<div class="carousel-inner">
<div class="item active"><!-- class of active since it's the first item -->
<img src="img/image1.png" alt="" />
</div>
<div class="item">
<img src="img/image4.png" alt="" />
</div>
<div class="item">
<img src="img/image3.png" alt="" />
<div class="carousel-caption">
<p>Hello to the WORLD!</p>
</div>
</div>
<div class="item">
<img src="img/image2.png" alt="" />
<div class="carousel-caption">
<p>Hello to the WORLD!</p>
</div>
</div>
<div class="item">
<img src="img/image1.png" alt="" />
<div class="carousel-caption">
<p>Hello to the WORLD!</p>
</div>
</div>
</div><!-- /.carousel-inner -->
<!-- Next and Previous controls below
href values must reference the id for this carousel -->
<a class="carousel-control left" href="#welcome-carousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#welcome-carousel" data-slide="next">›</a>
</div>
</body>
</html>
这是一个index.html文件。在同一目录中有一个名为js的目录，其中包含boostrap.min.js，一个名为css的css目录，其中包含boostrap.min.css。最后，当我下载它时，一个文件夹调用img和TB的图片。
Which is in an index.html file. Within the same directory there is a directory called js, with boostrap.min.js in it, and a css directory called css, with boostrap.min.css in it. Lastly, a folder call img with the haphling images TB gave when I downloaded it, and the images for my gallery.
基本上，它看起来像这样：
Basically, it looks like this:
当我单击箭头，图像不会改变。
When I click the arrows, the image doesn't change. Also, I want the arrows to be within the image, not off to the right like that.
推荐答案
它看起来像是你'不要拉入 bootstrap-carousel.js - 这是使用Carousel功能所必需的。
It looks as though you're not pulling in bootstrap-carousel.js - which is required to use the Carousel functionality.
如果您正在构建自定义版本的Bootstrap（可从这里获取： http： //twitter.github.com/bootstrap/customize.html ），但如果您不需要下载/ include（或远程调用）：
I don't know from your code above if you're building a customized version of Bootstrap (available here: http://twitter.github.com/bootstrap/customize.html), but if you're not you need to download/include (or remotely call):
<script src="js/bootstrap-carousel.js"></script>
除了缩小的基本版本。
您可能希望考虑的一个新颖的附加/选项是： http://www.bootstrapcdn.com/ 这是一个好主意，可能派上用场。
One novel addition/option you may wish to consider is: http://www.bootstrapcdn.com/ which is a great idea and may come in handy.
您还排除了 http： em> // ajax.googleapis.com
You've also excluded the http: in calling //ajax.googleapis.com
希望这有助。
这篇关于为什么从Twitter Bootstrap的轮播不适合我？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
