Bootstrap Carousel控件不起作用 [英] Bootstrap Carousel controls not working

查看:116
本文介绍了Bootstrap Carousel控件不起作用的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

twitter bootstrap传送带无法正常工作。我尝试将ID('#mycarousel')更改为.carousel或.mycarousel,但没有任何效果。当我单击控件时,它不会前进。这段代码有什么问题?

twitter bootstrap carousel not working. I tried changing the id ('#mycarousel') to .carousel or .mycarousel but nothing is working. when I click on the controls it does not advance. what is wrong with this piece of code?

<html>
<head>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css"
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js></script>
<script type="text/javascript">
function(){
    $('#mycarousel').carousel();
}
</script>
</head>

<body>
<div class="container">
<div class="row">

<div class="span12 well">
<div id="mycarousel" class="carousel slide span8">
<div class="carousel-inner">
    <div class="item active"><img src="car1.jpg"></div>
    <div class="item"><img src="car2.jpg"></div>
    <div class="item"><img src="car3.jpg"></div>
    <div class="item"><img src="car4.png"></div>
    <div class="item"><img src="car5.jpg"></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>
</div>
<script src="js/carousel.js"></script>
<script src="js/bootstrap-transition.js"></script>
<script src="js/bootstrap.js"></script>
</body>
</html>


推荐答案

以下代码将永远不会执行,因为您永远不会实际称呼它。

The following code will never gets executed, since you never actually call it.

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

您应更改以下内容:

function(){
    $('#mycarousel').carousel();
}

至:

$(function(){
    $('#mycarousel').carousel();
});

这将使其在dom准备就绪时执行。

This will make it execute when the dom is ready.

您也不会关闭链接标签来加载引导css,而不会被加载。

You also do not close you link tag that loads the bootstrap css from being loaded.The following:

<link rel="stylesheet" type="text/css" href="css/bootstrap.css"

应为:

<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />

您以不确定我的顺序加载JS文件。我认为它们应该相反。

You load the JS files in an order which I am not sure if it is correct. I suppose they should be in the reverse order.

这篇关于Bootstrap Carousel控件不起作用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆