2017-03-10 15 views
-1

カルーセルを動作させようとしていますが、動作していません。どこが間違っているのか分かりません。私はnavbarセクションを動作させました。何らかの理由でカルーセルがまったく表示されません。カルーセルをnavbarの上に置くことになっていますか、それとも今のところうまくいきますか?コンベアコンベアの中にカルーセルを置くはずですか?ここでは、コードは次のとおりです。カルーセルが動作しない

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <title>Paints &amp; Prints</title> 
 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <link rel="stylesheet" type="text/css" href="style.css"> 
 
</head> 
 

 
<body> 
 

 
    <nav class="navbar navbar-inverse navbar-fixed-top"> 
 
    <div class="container-fluid"> 
 
     <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#pp"> 
 
        <span class="icon-bar"></span> 
 
        <span class="icon-bar"></span> 
 
        <span class="icon-bar"></span> 
 
       </button> 
 
     <a class="navbar-brand" href="#">Paints &amp; Prints</a> 
 
     </div> 
 
     <div class="collapse navbar-collapse navbar-right" id="pp"> 
 
     <ul class="nav navbar-nav navbar-right"> 
 
      <li><a href="#">Services</a></li> 
 
      <li><a href="#">Contact</a></li> 
 
      <li class="dropdown"> 
 
      <a class="dropdown-toggle" data-toggle="dropdown" href="#"> 
 
         Your Account 
 
         <span class="caret"></span> 
 
         </a> 
 
      <ul class="dropdown-menu"> 
 
       <li><a href="#">Login</a></li> 
 
       <li><a href="#">Sign Up</a></li> 
 
      </ul> 
 
      </li> 
 
     </ul> 
 
     </div> 
 
    </div> 
 
    </nav> 
 

 
    <header 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> 
 
    <!-- Wrapper for slides --> 
 
    <div class="carousel-inner" role="list-box"> 
 
     <div class="item active"> 
 
     <div class="fill" style="background-image:url('img/slide1.jpg');"></div> 
 
     <div class="carousel-caption"> 
 
      <h2>Skilled Artists</h2> 
 
     </div> 
 
     </div> 
 
     <div class="item"> 
 
     <div class="fill" style="background-image:url('img/slide2.jpg');"></div> 
 
     <div class="carousel-caption"> 
 
      <h2>Made with the Finest Paints</h2> 
 
     </div> 
 
     </div> 
 
     <div class="item"> 
 
     <div class="fill" style="background-image:url('img/slide3.jpg');"></div> 
 
     <div class="carousel-caption"> 
 
      <h2>See us at Street Art Events</h2> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <!-- Controls --> 
 
    <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> 
 
    </header> 
 

 
    <div class="container"> 
 
    </div> 
 

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

 
</body> 
 

 
</html>

+0

はあなたがブラウザ内の任意のコンソールエラーを持っています助けるかもしれませんか? –

+0

カルーセルを初期化していません。ありがとう。 – user1544541

答えて

0

あなたのJSファイルにカルーセルを呼ぶのですか? ( '。カルーセル')。カルーセル(); 0126。

http://getbootstrap.com/javascript/#via-javascript-4

+0

私はそれをしました、私はそれを走らせました。しかし、ありがとう、非常に感謝します。 –

-1

これをチェックし、それはあなた

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <title>Paints &amp; Prints</title> 
 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
    <link rel="stylesheet" type="text/css" href="style.css"> 
 
</head> 
 

 
<body> 
 

 
    <nav class="navbar navbar-inverse navbar-fixed-top"> 
 
    <div class="container-fluid"> 
 
     <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#pp"> 
 
        <span class="icon-bar"></span> 
 
        <span class="icon-bar"></span> 
 
        <span class="icon-bar"></span> 
 
       </button> 
 
     <a class="navbar-brand" href="#">Paints &amp; Prints</a> 
 
     </div> 
 
     <div class="collapse navbar-collapse navbar-right" id="pp"> 
 
     <ul class="nav navbar-nav navbar-right"> 
 
      <li><a href="#">Services</a></li> 
 
      <li><a href="#">Contact</a></li> 
 
      <li class="dropdown"> 
 
      <a class="dropdown-toggle" data-toggle="dropdown" href="#"> 
 
         Your Account 
 
         <span class="caret"></span> 
 
         </a> 
 
      <ul class="dropdown-menu"> 
 
       <li><a href="#">Login</a></li> 
 
       <li><a href="#">Sign Up</a></li> 
 
      </ul> 
 
      </li> 
 
     </ul> 
 
     </div> 
 
    </div> 
 
    </nav> 
 

 
    <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> 
 
    <!-- Wrapper for slides --> 
 
    <div class="carousel-inner" role="list-box"> 
 
     <div class="item active"> 
 
     <img src="" alt="s"></div> 
 
     <div class="carousel-caption"> 
 
     Skilled Artists 
 
     </div> 
 
     </div> 
 
     <div class="item"> 
 
     <img src=""/> 
 
     <div class="carousel-caption"> 
 
      Made with the Finest Paints 
 
     </div> 
 
     </div> 
 
     <div class="item"> 
 
     <img src=""/> 
 
     <div class="carousel-caption"> 
 
     See us at Street Art Events 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <!-- Controls --> 
 
    <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> 
 

 
    <div class="container"> 
 
    </div> 
 

 
    
 

 
</body> 
 

 
</html>

+0

私はそれを解決した、私はそれを動作させるためのコードスニペットコードを追加することを忘れてしまった。ありがとう –

関連する問題