2017-11-19 11 views
1

私はYTでこのチュートリアルに従っていましたが、カルーセルがアクティブな画像のみを表示し、他人に切り替えることはありません。私はコードを何度もチェックしたが、すべてが整っているが、うまくいきません。あなたが何が間違っているか知っていれば答えてください、私はそんなに感謝します!あなたは、ブートストラップassestとjQueryを追加した、と<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="img/mountains.png"> 
     <div class="carousel-caption"> 
      <h1>Lorem Ipsum</h1> 
      <br> 
      <button type="button" class="btn btn-default">Lorem Ipsum</button> 
     </div> 
    </div> <!-- Kraj active slajdera --> 
    <div class="item"> 
     <img src="img/snow.png"> 
    </div> 
    <div class="item"> 
     <img src="img/red.png"> 
    </div> 
    </div> 
    <!-- Strelice Pocetak --> 
    <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> <!--Kraj slajdera --> 

+0

使用しているブートストラップのバージョンはどれですか? – ceferrari

答えて

1

::)ここ

はコードです:

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

 

 
<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="https://www.moroccoworldnews.com/wp-content/uploads/2015/09/moroccan-Sahara.jpg"> 
 
     <div class="carousel-caption"> 
 
      <h1>Lorem Ipsum</h1> 
 
      <br> 
 
      <button type="button" class="btn btn-default">Lorem Ipsum</button> 
 
     </div> 
 
    </div> <!-- Kraj active slajdera --> 
 
    <div class="item"> 
 
     <img src="http://www.dempos.com/wp-content/uploads/2015/07/Home-Company-Dempo-Travels.jpg"> 
 
    </div> 
 
    <div class="item"> 
 
     <img src="https://www.moroccoworldnews.com/wp-content/uploads/2015/09/moroccan-Sahara.jpg"> 
 
    </div> 
 
    </div> 
 
    <!-- Strelice Pocetak --> 
 
    <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>