繁体   English   中英

Bootstrap Carousel无法正常工作

[英]Bootstrap Carousel doesn't work properly

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

<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有关吗? 有任何想法吗?

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

...
<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。 否则,如果正在滚动等,那么看来您已正确设置了它。 只要确保您确实为图像添加了路径即可。

在您的代码中使用它,希望对您有所帮助

您需要使用以下方法进行初始化:

$('.carousel').carousel()

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM