Bootstrap Carousel无法正常工作

时间:2014-09-23 13:09:38

标签: javascript jquery css twitter-bootstrap

您认为这里的问题是什么?

<html>
    <head>
    <meta charset="utf-8"> <!-- for character ">>" --> 
    <!-- solve problem for icon's flat UI -->

    <title>Welcome!</title>
    <link href="css/bootstrap.css" rel="stylesheet">
    <link href="css/bootstrap.min.css" rel="stylesheet">    
    <link href="css/bootstrap-theme.css" rel="stylesheet">  
    <link href="css/bootstrap-theme.min.css" rel="stylesheet">
    <script src="javascript/jquery.js"> </script>
    <script src="javascript/jquery.validate.min.js"> </script>
    <script src="javascript/jquery-ui-1.9.2.custom.min.js"></script>
    <script src="javascript/bootstrap.js"></script>
    <script src="javascript/carousel.js"></script>
  </head>

  <body>

  . . . . 

<div id="carousel-example-generic" 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>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner">
    <div class="item active">
    <img src="..." alt="...">
    <div class="carousel-caption">
    ...
    </div>
    </div>
    <div class="item">
    <img src="..." alt="...">
    <div class="carousel-caption">
    ...
    </div>
    </div>
    ...
    </div>

    <!-- Controls -->
    <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
    </a>
    <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
    </a>
    </div>

它没有显示确切的旋转木马。相反,它显示了一些缺失的链接,但它具有滚动功能。是否与必须包含的.js和.css有关?有什么想法吗?

2 个答案:

答案 0 :(得分:1)

这看起来像是bootstrap网站上的确切代码。无论哪种方式,在此代码中为您显示缺失链接的原因是因为您需要实际为图像源设置路径

...
<div class='item'>
    <img src='<!-- whatever the path to your image is -->'> <!-- this is what is missing -->
    <div class='carousel-caption'>
    </div>
    ...

此外,我会将您的轮播的ID更改为对您的网页有意义的内容,并且很容易为您跟踪。在做的时候不要忘记更改控件上的'href'属性以匹配新轮播id的id。否则,如果它是滚动等,那么它似乎你已正确设置它。只需确保您实际为图像添加路径。

答案 1 :(得分:0)

在您的代码中使用此功能,希望这可能有用

您需要使用以下内容进行初始化:

$('.carousel').carousel()