2014-09-23 60 views
0

您認爲這裏的問題是什麼?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有關?有任何想法嗎?

+0

''...的問題。 '......'不是一個圖像。另外確保你初始化你的傳送帶。我想指出,你包括更多的鏈接,然後你需要。例如'css/bootstrap.css'和'css/bootstrap.min.css'是同樣的東西('.min'只是意味着一切都緊湊以節省空間)。它也似乎你包括jQuery兩次。 – 2014-09-23 13:52:33

回答

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。否則,如果它正在滾動等,那麼它似乎你已經正確設置。只要確保你實際上爲你的圖像添加了一條路徑。

0

使用這個在你的代碼,希望這會有所幫助

您需要使用此,用來初始化:

$('.carousel').carousel()