ブートストラップ・カルーセルが一度にすべてのスライドを表示しています

ブートストラップ・カルーセルを初めて使用しています。何かヒント？ブートストラップ・カルーセルが一度にすべてのスライドを表示しています

<head> 
<meta charset="utf-8"> 
<meta http-equiv="X-UA-Compatible" content="IE=edge"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<!--- Font Awsome --> 
<script src="https://use.fontawesome.com/4c7009c904.js"></script> 
<!-- Latest compiled and minified CSS --> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
<!-- my CSS --> 
<link rel="stylesheet" href="css/styles.css">

の下部に私が以下：

$(function(){ 
$('.carousel').carousel() 
});

これはヘッダである：

  <div id="madinah-carousel" class="carousel slide" data-ride="carousel"> 
      <!-- Indicators --> 
      <ol class="carousel-indicators"> 
       <li data-target="#madinah-carousel" data-slide-to="0" class="active"></li> 
       <li data-target="#madinah-carousel" data-slide-to="1"></li> 
       <li data-target="#madinah-carousel" data-slide-to="2"></li> 
       <li data-target="#madinah-carousel" data-slide-to="3"></li> 
      </ol> 
      <!-- Wrapper for slides --> 
      <div class="carousel-inner" role="listbox"> 
       <div class="carousel-item active"> 
        <img src="img/mad/1.jpeg" alt="Madinah first screenshot"> 
       </div> 
       <div class="carousel-item"> 
        <img src="img/mad/2.jpeg" alt="Madinah second screenshot"> 
       </div> 
       <div class="carousel-item"> 
        <img src="img/mad/3.jpeg" alt="Madinah third screenshot"> 
       </div> 
       <div class="carousel-item"> 
        <img src="img/mad/4.jpeg" alt="Madinah fourth screenshot"> 
       </div> 
      </div> 
      <!-- Controls --> 
      <a class="left carousel-control" href="#madinah-carousel" role="button" data-slide="prev"> 
       <span class="icon-prev" aria-hidden="true"></span> 
       <span class="sr-only">Previous</span> 
      </a> 
      <a class="right carousel-control" href="#madinah-carousel" role="button" data-slide="next"> 
       <span class="icon-next" aria-hidden="true"></span> 
       <span class="sr-only">Next</span> 
      </a> 
     </div>

私は、この関数はJS含ま

 <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
    <script src="https://code.jquery.com/jquery-3.1.1.slim.js" integrity="sha256-5i/mQ300M779N2OVDrl16lbohwXNUdzL/R2aVUXyXWA=" crossorigin="anonymous"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
    <!-- Latest compiled and minified JavaScript --> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
    <!-- Scrolling Nav JavaScript --> 
    <script src="js/jquery.easing.min.js"></script> 
    <script src="js/scrolling-nav.js"></script> 
    <script src="js/script.js"></script>

出典

2016-11-29 Khaled Alsibai

ファイルのヘッダーを表示しますか？参照が必要です。 –

あなたはその機能をいつ呼びますか？その時点で要素がすでに存在していますか？ – CBroe

ブートストラップがロードされていることを確認してください。 –

あなたはdivのにsetted間違ったクラスを持って、それはそれが私はフィドルとそれにだと試してみただけのdivクラス=「項目」

<div id="madinah-carousel" class="carousel slide" data-ride="carousel"> 
      <!-- Indicators --> 
      <ol class="carousel-indicators"> 
       <li data-target="#madinah-carousel" data-slide-to="0" class="active"></li> 
       <li data-target="#madinah-carousel" data-slide-to="1"></li> 
       <li data-target="#madinah-carousel" data-slide-to="2"></li> 
       <li data-target="#madinah-carousel" data-slide-to="3"></li> 
      </ol> 
      <!-- Wrapper for slides --> 
      <div class="carousel-inner" role="listbox"> 
       <div class="item active"> 
        <img src="img/mad/1.jpeg" alt="Madinah first screenshot"> 
       </div> 
       <div class="item"> 
        <img src="img/mad/2.jpeg" alt="Madinah second screenshot"> 
       </div> 
       <div class="item"> 
        <img src="img/mad/3.jpeg" alt="Madinah third screenshot"> 
       </div> 
       <div class="item"> 
        <img src="img/mad/4.jpeg" alt="Madinah fourth screenshot"> 
       </div> 
      </div> 
      <!-- Controls --> 
      <a class="left carousel-control" href="#madinah-carousel" role="button" data-slide="prev"> 
       <span class="icon-prev" aria-hidden="true"></span> 
       <span class="sr-only">Previous</span> 
      </a> 
      <a class="right carousel-control" href="#madinah-carousel" role="button" data-slide="next"> 
       <span class="icon-next" aria-hidden="true"></span> 
       <span class="sr-only">Next</span> 
      </a> 
     </div>

だのdivクラスは=「カルーセル項目」ではありませんワーキング。

よろしくお願いいたします。

出典

2016-11-29 21:37:23

はい、それは今働いています、どうもありがとう、ドキュメンテーションがdivクラス= "carousel-item " それは変です！ –

私はちょうどチェックしました、それはカルーセルアイテムクラスのブートストラップv4アルファです。私はあなたのカルーセルのためにw3の学校からこの文書を使用しました。 http://www.w3schools.com/bootstrap/bootstrap_carousel.asp –

ブートストラップ・カルーセルが一度にすべてのスライドを表示しています

答えて

関連する問題