ブートストラップカルーセルが機能していません

コンテナ流体div内にブートストラップカルーセルを作成しようとしています。ただし、ページが読み込まれると、スライドが重ねて積まれ、カルーセルのすべてのボタンが反応せず、次と前の矢印は表示されません。ブートストラップカルーセルが機能していません

カルーセルのために使用されるコードは、ここで、ブートストラップウェブサイトからです： https://v4-alpha.getbootstrap.com/components/carousel/

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
    <title>Social Wall</title> 
 
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> 
 
    <link rel="stylesheet" type="text/css" href="styles/build/css/styles.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
    <script type="text/javascript" src="script.js"></script> 
 
</head> 
 

 
<body> 
 
    <div class="container-fluid"> 
 
    <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel"> 
 
     <ol class="carousel-indicators"> 
 
     <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li> 
 
     <li data-target="#carouselExampleIndicators" data-slide-to="1"></li> 
 
     <li data-target="#carouselExampleIndicators" data-slide-to="2"></li> 
 
     </ol> 
 
     <div class="carousel-inner" role="listbox"> 
 
     <div class="carousel-item active"> 
 
      <img class="d-block img-fluid" src="https://preview.ibb.co/d7Aezk/slider1.jpg" alt="First slide"> 
 
     </div> 
 
     <div class="carousel-item"> 
 
      <img class="d-block img-fluid" src="https://preview.ibb.co/iPHRek/slider2.jpg" alt="Second slide"> 
 
     </div> 
 
     <div class="carousel-item"> 
 
      <img class="d-block img-fluid" src="https://preview.ibb.co/kTW8s5/slider3.jpg" alt="Third slide"> 
 
     </div> 
 
     </div> 
 
     <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev"> 
 
     <span class="carousel-control-prev-icon" aria-hidden="true"></span> 
 
     <span class="sr-only">Previous</span> 
 
     </a> 
 
     <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next"> 
 
     <span class="carousel-control-next-icon" aria-hidden="true"></span> 
 
     <span class="sr-only">Next</span> 
 
     </a> 
 
    </div> 
 
    </div> 
 
    <div class="buttonGroup"> 
 
    <div class="btn-group btn-group-justified"> 
 
     <div class="btn-group" role="group"> 
 
     <button id="manualBtn" type="button" class="btn btn-default">Manual</button> 
 
     </div> 
 
     <div class="btn-group" role="group"> 
 
     <button id="twitterBtn" type="button" class="btn btn-default">Twitter</button> 
 
     </div> 
 
     <div class="btn-group" role="group"> 
 
     <button id="instagramBtn" type="button" class="btn btn-default">Instagram</button> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="wrapper"> 
 
    <div id="main"> 
 
    </div> 
 
    </div> 
 
    <div class="buttonWrapper"> 
 
    <button id="loadMore" type="button" class="btn btn-primary btn-lg">Load More</button> 
 
    </div> 
 
</body> 
 

 
</html>

出典

2017-08-01 Kevin Mangal

ブートストラップ 'JS' libには不足している：ここでは

は、デモリンクです。 –

このコードを使用することができます：

注：あなたはbootstrap.min.jsライブラリがありません。 https://output.jsbin.com/huhedecuyo

https://jsbin.com/huhedecuyo/edit?html,output

<!DOCTYPE html> 
<html> 

<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <title>Social Wall</title> 
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script> 
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"> 
    <link rel="stylesheet" type="text/css" href="styles/build/css/styles.css"> 
    <script type="text/javascript"> 
     $(document).ready(function(){ 
     $('#carouselExampleIndicators').carousel({ 
      interval: 2000, 
      pause: "false" 
     }); 
     }); 
    </script> 
</head> 

<body> 
    <div class="container-fluid"> 
     <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel"> 
      <ol class="carousel-indicators"> 
       <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li> 
       <li data-target="#carouselExampleIndicators" data-slide-to="1"></li> 
       <li data-target="#carouselExampleIndicators" data-slide-to="2"></li> 
      </ol> 
      <div class="carousel-inner" role="listbox"> 
       <div class="item active"> 
        <img class="d-block img-fluid" src="https://preview.ibb.co/d7Aezk/slider1.jpg" alt="First slide"> 
       </div> 
       <div class="item"> 
        <img class="d-block img-fluid" src="https://preview.ibb.co/iPHRek/slider2.jpg" alt="Second slide"> 
       </div> 
       <div class="item"> 
        <img class="d-block img-fluid" src="https://preview.ibb.co/kTW8s5/slider3.jpg" alt="Third slide"> 
       </div> 
      </div> 
      <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev"> 
       <span class="carousel-control-prev-icon" aria-hidden="true"></span> 
       <span class="sr-only">Previous</span> 
      </a> 
      <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next"> 
       <span class="carousel-control-next-icon" aria-hidden="true"></span> 
       <span class="sr-only">Next</span> 
      </a> 
     </div> 
    </div> 
    <div class="buttonGroup"> 
     <div class="btn-group btn-group-justified"> 
      <div class="btn-group" role="group"> 
       <button id="manualBtn" type="button" class="btn btn-default">Manual</button> 
      </div> 
      <div class="btn-group" role="group"> 
       <button id="twitterBtn" type="button" class="btn btn-default">Twitter</button> 
      </div> 
      <div class="btn-group" role="group"> 
       <button id="instagramBtn" type="button" class="btn btn-default">Instagram</button> 
      </div> 
     </div> 
    </div> 
    <div class="wrapper"> 
     <div id="main"> 
     </div> 
    </div> 
    <div class="buttonWrapper"> 
     <button id="loadMore" type="button" class="btn btn-primary btn-lg">Load More</button> 
    </div> 
</body> 

</html>

出典

2017-08-01 07:32:37

あなたは、ブートストラップのjsファイルを含めることを忘れ..

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

出典

2017-08-01 07:30:06

ブートストラップカルーセルが機能していません

答えて

関連する問題