Bootstrap旋轉木馬不顯示幻燈片

我的旋轉木馬不顯示幻燈片。似乎我有一個問題，類.carousel因爲當我刪除它的旋轉木馬的作品，但不是指標Bootstrap旋轉木馬不顯示幻燈片

我有另一個旋轉木馬在其他頁面工作我cheks的CSS，沒有什麼叫類.carousel可以被幹擾

你能看到我在這裏失蹤了嗎？

這是整個代碼。

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> 
    <title>QTZ</title> 

    <!-- CSS --> 
    <link href="css/bootstrap.css" rel="stylesheet"> 
    <link href="css/navbar-fixed-side.css" rel="stylesheet"> 
    <link href="css/styles.css" rel="stylesheet"> 
    <link href="css/font-awesome.css" rel="stylesheet"> 

    <!-- jQuery library --> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
    <!-- Latest compiled JavaScript --> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> 
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> 
    <!--[if lt IE 9]> 
     <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script> 
     <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> 
    <![endif]--> 
    <style type="text/css"> 
.carousel-indicators { 
    position: absolute; 
    top: 22em !important; 
    left: 50%; 
    z-index: 15; 
    width: 60%; 
    padding-left: 0; 
    margin-left: -30%; 
    text-align: center; 
    list-style: none; 
    } 
.carousel-indicators li { 
    display: inline-block; 
    width: 14px; 
    height: 14px; 
    margin: 1px; 
    text-indent: -999px; 
    cursor: pointer; 
    background-color: #000\9; 
    background-color: rgba(0,0,0,0); 
    border: 1px solid #fff; 
    border-radius: 10px; 
} 

.carousel-indicators .active { 
    width: 14px; 
    height: 14px; 
    margin: 1px; 
    background-color: white; 
} 

.carousel .item>img { 
    top: 0; 
    left: 0; 
    max-width: 100%; 
} 

.carousel-indicators li { 
     box-shadow: 0px 0px 6px #000; 
} 

    </style> 

    </head> 
    <body> 
    <div class="container-fluid"> 
     <div class="row"> 
     <div class="col-sm-9 col-lg-10"> 

      <div class="row"> 
        <div id="myCarousel" class="carousel slide"> 
        <!-- INDICADORES CAROUSEL --> 
        <ol class="carousel-indicators"> 
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li> 
        <li data-target="#myCarousel" data-slide-to="1"></li> 
        <li data-target="#myCarousel" data-slide-to="2"></li> 
        <li data-target="#myCarousel" data-slide-to="3"></li> 
        </ol> 
        <!-- SLIDES --> 
        <div class="carousel-inner" role="listbox"> 
        <div class="item active"> 
         <img src="images/murales2015-1.jpg" alt="" style="width:100%;"> 
        </div> 
        <div class="item"> 
         <img src="images/murales2015-2.jpg" alt="" style="width:100%;"> 
        </div> 
        <div class="item"> 
         <img src="images/murales2015-3.jpg" alt="" style="width:100%;"> 
        </div> 
        <div class="item"> 
         <img src="images/murales2015-4.jpg" alt="" style="width:100%;"> 
        </div> 
        </div> 
       </div> 
      </div> 

      </div> 
     </div><!--fin contenido--> 

     </div> 

    </body> 
<script> 
$(document).ready(function(){ 
    // Activate Carousel 
    $("#myCarousel").carousel({interval: 6000, pause: ""}); 

    // Enable Carousel Indicators 
    $(".item1").click(function(){ 
     $("#myCarousel").carousel(0); 
    }); 
    $(".item2").click(function(){ 
     $("#myCarousel").carousel(1); 
    }); 
    $(".item3").click(function(){ 
     $("#myCarousel").carousel(2); 
    }); 
    $(".item4").click(function(){ 
     $("#myCarousel").carousel(3); 
    }); 

}); 
</script> 
<script src="js/main.js"></script> <!-- Gem jQuery --> 
<script src="js/bootstrap.min.js"></script> 


</html>

來源

2016-12-08 MartinS

檢查錯誤控制檯？ – j08691

請閱讀如何創建[最小，完整和可驗證的示例]（http://stackoverflow.com/help/mcve）。 –

爲什麼你有那裏的JavaScript？不引導程序會自動爲你做這件事嗎？ – 2pha

看起來你錯過了指標上的類。

<!-- INDICADORES CAROUSEL --> 
       <ol class="carousel-indicators"> 
       <li class="item1" data-target="#myCarousel" data-slide-to="0" class="active"></li> 
       <li class="item2" data-target="#myCarousel" data-slide-to="1"></li> 
       <li class="item3" data-target="#myCarousel" data-slide-to="2"></li> 
       <li class="item4" data-target="#myCarousel" data-slide-to="3"></li> 
       </ol>

看到這裏的工作的例子，https://jsfiddle.net/qjg28j4s/

來源

2016-12-08 20:02:03

謝謝，我錯過了。現在正在工作 – MartinS

您對指標列表項的單擊處理程序使用未在HTML中定義的類名稱選擇器。嘗試將這些類名添加到列表項中。

   <li data-target="#myCarousel" data-slide-to="0" class="item1 active"></li> 
       <li data-target="#myCarousel" data-slide-to="1" class="item2"></li> 
       <li data-target="#myCarousel" data-slide-to="2" class="item3"></li> 
       <li data-target="#myCarousel" data-slide-to="3" class="item4"></li>

來源

2016-12-08 19:50:52

Bootstrap旋轉木馬不顯示幻燈片

回答

相關問題