2017-11-29 13 views
-2

私は間違いを見つけられません。誰かが私を助け、私のカルーセルがうまくいかない理由を説明できますか?ここで回転台が動かない

は頭です:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<link href="css/main.css" rel="stylesheet"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
<div class="top-block"> 
 
    <div class="container"> 
 
    <div class="row"> 
 
     <div class="col-md-6 "> 
 
     <div id="carousel-id" class="carousel slide" data-ride="carousel"> 
 
      <ol class="carousel-indicators"> 
 
      <li data-target="#carousel-id" data-slide-to="0" class=""></li> 
 
      <li data-target="#carousel-id" data-slide-to="1" class=""></li> 
 
      <li data-target="#carousel-id" data-slide-to="2" class=""></li> 
 
      <li data-target="#carousel-id" data-slide-to="3" class="active"></li> 
 
      </ol> 
 
      <div class="carousel-inner"> 
 
      <div class="item"> 
 
       <img src="http://www.gettyimages.com/gi-resources/images/VR/GettyImages-500977426.jpg"> 
 
       <div class="container"> 
 
       </div> 
 
      </div> 
 

 
      <div class="item"> 
 
       <img src="img/slider1.png"> 
 
       <div class="container"> 
 
       </div> 
 
      </div> 
 
      <div class="item"> 
 
       <img src="http://www.gettyimages.com/gi-resources/images/Embed/new/embed2.jpg"> 
 
       <div class="container"> 
 
       </div> 
 
      </div> 
 

 
      <div class="item active"> 
 
       <img src="https://www.w3schools.com/w3css/img_fjords.jpg"> 
 
       <div class="container"> 
 
       </div> 
 
      </div> 
 
      <a class="left carousel-control" href="#carousel-id" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a> 
 
      <a class="right carousel-control" href="#carousel-id" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

コントローラは、私はそれらをクリックしたときに作業していないし、別の画像にスライドされていません。

+0

ブートストラップJS CDNをインポートするのを忘れ –

答えて

1

あなたは何のカルーセルコードが存在しないとして、彼らは確かに文句を言わない

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

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<link href="css/main.css" rel="stylesheet"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
<div class="top-block"> 
 
    <div class="container"> 
 
    <div class="row"> 
 
     <div class="col-md-6 "> 
 
     <div id="carousel-id" class="carousel slide" data-ride="carousel"> 
 
      <ol class="carousel-indicators"> 
 
      <li data-target="#carousel-id" data-slide-to="0" class=""></li> 
 
      <li data-target="#carousel-id" data-slide-to="1" class=""></li> 
 
      <li data-target="#carousel-id" data-slide-to="2" class=""></li> 
 
      <li data-target="#carousel-id" data-slide-to="3" class="active"></li> 
 
      </ol> 
 
      <div class="carousel-inner"> 
 
      <div class="item"> 
 
       <img src="http://www.gettyimages.com/gi-resources/images/VR/GettyImages-500977426.jpg"> 
 
       <div class="container"> 
 
       </div> 
 
      </div> 
 

 
      <div class="item"> 
 
       <img src="img/slider1.png"> 
 
       <div class="container"> 
 
       </div> 
 
      </div> 
 
      <div class="item"> 
 
       <img src="http://www.gettyimages.com/gi-resources/images/Embed/new/embed2.jpg"> 
 
       <div class="container"> 
 
       </div> 
 
      </div> 
 

 
      <div class="item active"> 
 
       <img src="https://www.w3schools.com/w3css/img_fjords.jpg"> 
 
       <div class="container"> 
 
       </div> 
 
      </div> 
 
      <a class="left carousel-control" href="#carousel-id" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a> 
 
      <a class="right carousel-control" href="#carousel-id" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>