bootstrap-carousel-not-workingで、スライドクラスはブートストラップ3では使用できません。

これはブートストラップ3を使用してスライダを表示するコードですが、機能しません。他のCSSファイルは使用していません。bootstrap-carousel-not-workingで、スライドクラスはブートストラップ3では使用できません。

<div id="carousel" class="carousel slide" data-ride="carousel"> 
    <div class="carousel-inner"> 
     <div class="item active"> 
      <img src="img/a.jpg" alt="Chania"> 
     </div> 
     <div class="item"> 
      <img src="img/a2.jpg" alt="Chania"> 
     </div> 
    </div> 
    <a class="left carousel-control" href="#carousel" role="button" data-slide="prev"> 
     <span class="glyphicon glyphicon-chevron-left"></span> 
     <span class="sr-only">Previous</span> 
    </a> 
    <a class="right carousel-control" href="#carousel" role="button" data-slide="next"> 
     <span class="glyphicon glyphicon-chevron-right"></span> 
     <span class="sr-only">Next</span> 
    </a> 
</div>

出典

2016-10-21 abhinav bansal

同様

はたぶん、あなたはカルーセルプラグインが含まれていませWICHカスタムboostrap.jsファイルを使用します。あなたが書いたコードはうまく動作します。http://www.bootply.com/GP90w7vqZN – ustmaestro

コードは例hereのようです。それはうまくいきます。必要なJSを含めましたか？

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title>carousel</title> 
    <link rel="stylesheet" href="https://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="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
    <style> 
     .carousel-inner > .item > img, 
     .carousel-inner > .item > a > img { 
      width: 70%; 
      margin: auto; 
     } 
    </style> 
</head> 
<body> 
    <div id="carousel" class="carousel slide" data-ride="carousel"> 
     <div class="carousel-inner"> 
      <div class="item active"> 
       <img src="http://vignette1.wikia.nocookie.net/streetfighter/images/e/e6/CammyHUD.jpg/revision/latest?cb=20160619022012" alt="Chania"> 
      </div> 
      <div class="item"> 
       <img src="http://vignette1.wikia.nocookie.net/streetfighter/images/4/48/Chun_Li.jpg/revision/20140419063249" alt="Chania"> 
      </div> 
      <div class="item"> 
       <img src="http://vignette3.wikia.nocookie.net/streetfighter/images/a/a5/KarinHUD.jpg/revision/latest?cb=20160619022438" alt="Chania"> 
      </div> 
     </div> 
     <a class="left carousel-control" href="#carousel" role="button" data-slide="prev"> 
      <span class="glyphicon glyphicon-chevron-left"></span> 
      <span class="sr-only">Previous</span> 
     </a> 
     <a class="right carousel-control" href="#carousel" role="button" data-slide="next"> 
      <span class="glyphicon glyphicon-chevron-right"></span> 
      <span class="sr-only">Next</span> 
     </a> 
    </div> 
</body> 
</html>

出典

2016-10-21 09:48:01

ええ、応答に感謝します。私はあなたの提案をお試しになりますが、スライドクラスには問題があると思います。スライドクラスは、ブートストラップ-3では利用できません。 –

あなたのコードは完全に動作しているようです。 jsを適切にインクルードすると、必要なのはコンテナを満たすイメージを使用することだけです。このexample

出典

2016-10-21 10:38:50 Joolio

bootstrap-carousel-not-workingで、スライドクラスはブートストラップ3では使用できません。

答えて

関連する問題