ブートストラップ3カルーセルが壊れていた

私は最初のウェブサイトで作業していて、カルーセルをスライドさせたりボタンを操作しているようには見えません。私はカルーセルに構築するためにブートストラップ3を使用しています。構文を注意深く見て、ブートストラップから別のコードをコピーして貼り付けて、それがうまくいくかどうかを確認しました。それも失敗しました。私が間違っていることを誰かが教えてくれれば、私は感謝しています。ブートストラップ3カルーセルが壊れていた

<!DOCTYPE html> 
<html> 
    <head> 
    <!-- 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"> 

    <!-- Optional theme --> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> 

    <!-- 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> 
    <link rel="stylesheet" type="text/css" href="css/main.css"> 
    <link rel="stylesheet" type="text/css" href="css/normalize.css"> 
    <title>Home</title> 
    </head> 


    <body> 
    <nav class="navbar navbar-inverse"> 
     <div class="container-fluid"> 

     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#mainNavBar" 
      aria-expanded="false"> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      </button> 
      <a href="index.html" class="navbar-brand">MG</a> 
     </div> 

     <div class="collapse navbar-collapse" id="mainNavBar"> 
      <ul class="nav navbar-nav"> 
      <li class="active"><a href="index.html">Home</a></li> 
      <li><a href="about.html">About</a></li> 
      <li><a href="contact.html">Contact</a></li> 
      <li><a href="resume.html">Resum&eacute</a></li> 
      </ul> 
     </div> 
     </div> 
    </nav> 


    <div class="container-fluid"> 
     <div id="myCarousel" class="carousel slide" data-ride="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> 
     </ol> 

     <div class="carousel-inner" role="listbox"> 
      <div class="item active"> 
      <img src="images/code.jpg" alt="Code" class="img-responsive"> 
      </div> 

      <div class="item"> 
      <img src="images/gigabyte.jpg" alt="Motherboard" class="img-responsive"> 
      </div> 

      <div class="item"> 
      <img src="images/mac.jpg" alt="Mac" class="img-responsive"> 
      </div> 
     </div> 

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

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



     <section> 


     <a href="www.github.com/nix12">My github repository</a> 

     <h2>List of skills and icons</h2> 


     <div class="column1">Column1</div> 
     <div class="column2">Column2</div> 
     <div class="column3">Column3</div> 


     </section> 

    <footer> 

    </footer> 
    </body> 

    <script type="text/javascript"> 
    $('#myCarousel').carousel(); 
    </script> 
</html>

出典

2016-08-17 user3799793

bootstrap.jsを使用する前にjQueryをロードする必要があります。また、</body>タグの直前にjavascriptファイルを読み込む必要があります。これはあなた自身のスクリプトにも当てはまります。試してください：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"> 
    <script> 
     $('#myCarousel').carousel(); 
    </script> 
</body>

出典

2016-08-17 22:14:50

ありがとうございました。 – user3799793

ブートストラップ3カルーセルが壊れていた

答えて

関連する問題