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