引导程序旋转木马控件不工作

Bootstrap Carousel controls not working

本文关键字：工作 控件 旋转木马 引导程序      更新时间：2023-09-26

twitter引导程序转盘不工作。我尝试将id（"#mycarousel"）更改为.cab或.mycousel，但什么都不起作用。当我点击控件时，它不会前进。这段代码出了什么问题？

<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>

下面的代码永远不会被执行，因为你从来没有真正调用过它。

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

您应该更改以下内容：

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

至：

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

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

您也不会关闭从加载中加载引导css的链接标记。以下内容：

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

应为：

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

你按照我不确定是否正确的顺序加载JS文件。我想他们应该按照相反的顺序。

相关文章：