傳送帶引導程序不起作用

有人可以幫助我嗎？我正在測試引導程序傳送帶，但它不起作用。具體來說：previuos/next按鈕不起作用，傳送帶不會滑動到下一張幻燈片。這是我的頁面代碼，但我不知道我做錯了什麼。傳送帶引導程序不起作用

<!DOCTYPE html> 
<html> 
<head> 

<title>Title</title> 

<!-- META --> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<meta http-equiv="X-UA-Compatible" content="IE=edge"> 
<!-- META --> 

<!-- CSS --> 
<link href="css/stile.css" rel="stylesheet" type="text/css"> 
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen"> 
<!-- CSS --> 

</head> 
<body> 

<div class="container"> 

    <div id="myCarousel" class="carousel slide"> 

     <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> 
     </ol> 

     <div class="carousel-inner"> 
      <div class="item active"> 
       <img src="image1.jpg" alt="image1.jpg"> 
      </div> 
      <div class="item"> 
       <img src="image2.jpg" alt="image2.jpg"> 
      </div> 
      <div class="item"> 
       <img src="image3.jpg" alt="image3.jpg"> 
      </div> 
     </div> 

     <a class="left carousel-control" href="#myCarousel" data-slide="prev"> 
      <span class="icon-prev"></span> 
     </a> 
     <a class="right carousel-control" href="#myCarousel" data-slide="next"> 
      <span class="icon-next"></span> 
     </a> 
    </div> 
</div> 

<!-- JS --> 
<script src="//code.jquery.com/jquery-latest.js"></script> 
<script src="js/bootstrap.min.js"></script> 
<!-- JS --> 
</body> 
</html>

來源

2016-03-04 Aleb95

控制檯中是否有任何JS錯誤？ –

您可能需要使用'＃myCarousel' div上的'data-ride =「carousel」'屬性初始化輪播。或者在代碼中顯式初始化：'$（'。carousel'）。carousel（）' –

你是否用下面的JS調用了Carousel？

$('.carousel').carousel({ 
    interval: 2000 
})

嘗試把鏈接/腳本頂部：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

這些是你的根文件嵌入式鏈接，而不是。你可以使用你的，但把它們放在頂部，看看是否有幫助。

來源

2016-03-04 20:38:30 JoeyG

我應該在哪裏包含腳本？ – Aleb95

可以在標記之前的頁面底部（包含腳本標記），也可以位於custom.js文件中（如果使用的話）。 – JoeyG

但它不是包含在bootstrap.min.js中嗎？ – Aleb95

不確定您的第一個樣式表條目是否正確。它應該是stile.css？

您應該包括以下樣式表（確保它在你的樣式表文件夾中）

<link href="css/carousel.css" rel="stylesheet">

我用傳送帶滑塊在我的網站之一。你的代碼似乎缺少一些細節。第一個div應該附加data-ride =「carousel」> 我的第二個div包含role =「listbox」>而你沒有。我已經包含了我的代碼以供您參考。我希望這有幫助。

<!-- Carousel 
================================================== --> 
<div id="myCarousel" class="carousel slide" data-ride="carousel"> 
    <!-- Indicators --> 
    <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> 
    </ol> 
    <div class="carousel-inner" role="listbox"> 
    <div class="item active"> 
     <img class="first-slide" src="images/Dock1.jpg" alt="First slide"> 
     <div class="container"> 
     <div class="carousel-caption"> 
      <h1>If you have a web site it needs to be responsive and &quot;mobile 
      friendly&quot; </h1> 
      <p> </p> 
      <p><a class="btn btn-lg btn-primary" href="https://donfiler.us" role="button">Sign up today</a></p> 
     </div> 
     </div> 
    </div> 
    <div class="item"> 
     <img class="second-slide" src="images/Forest1.jpg" alt="Second slide"> 
     <div class="container"> 
     <div class="carousel-caption"> 
      <h1> Revamp your website usability with HTML to WordPress Conversion Services </h1> 
      <p></p> 
      <p><a class="btn btn-lg btn-primary" href="https://donfiler.us" role="button">Learn more</a></p> 
     </div> 
     </div> 
    </div> 
    <div class="item"> 
     <img class="third-slide" src="images/Tree1.jpg" alt="Third slide"> 
     <div class="container"> 
     <div class="carousel-caption"> 
      <h1>Contact Us Today to Get Started on Your New Site </h1> 
      <p> </p> 
      <p><a class="btn btn-lg btn-primary" href="https://donfiler.us/portfolio.html" role="button">Browse gallery</a></p> 
     </div> 
     </div> 
    </div> 
    </div> 
    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"> 
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> 
    <span class="sr-only">Previous</span> 
    </a> 
    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"> 
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 
    <span class="sr-only">Next</span> 
    </a> 
</div><!-- /.carousel -->

來源

2016-03-04 18:52:24

第一個樣式表是我的css。我試圖做出更改，但結果是一樣的。 – Aleb95

傳送帶引導程序不起作用

回答

相關問題