ブートストラップスライドショー（カルーセル）インジケータが機能しない

私はブートストラップカルーセルをコーディングしましたが、スクロールするためのインジケータ（左、右）を取得できません。ブートストラップスライドショー（カルーセル）インジケータが機能しない

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width; initital-scale=1"> 
 
    <title> Bootstrap Example</title> 
 

 
    <!-- Bootstrap References --> 
 

 
    <!-- Latest compiled and minified CSS --> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 

 
    <!-- jQuery library --> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 

 
    <!-- Latest compiled JavaScript --> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
    <script src="index.js"></script> 
 
    <link href="index.css" rel="stylesheet" type="text/css" /> 
 
</head> 
 

 
<body> 
 
    <div class="container"> 
 
     <div class="row"> 
 
      <div class="col-sm-12"> 
 
       <div id="mySlider" class="carousel slide" data-ride="carousel"> 
 

 
        <!-- .nav's buttons on the bottom --> 
 
        <ol class="carousel-indicators"> 
 
         <li data-target="#mySlider" data-slide-to="0" class="active"></li> 
 
         <li data-target="#mySlider" data-slide-to="1"></li> 
 
        </ol> 
 

 
        <!-- Image slides --> 
 
        <div class="carousel-inner" role="listbox"> 
 

 
         <div class="item active"> 
 
          <figure> 
 
           <img width=500px height=500px src="http://www.hdwallpapersfreedownload.com/uploads/large/fruits/orange-fruit-with-leaf-hd.jpg" alt="Slide1"> 
 
           <!--<div class="carousel-caption">This is a fruit leaf</div>--> 
 
          </figure> 
 
          <figcaption class="carousel-caption">This is a fruit leaf</figcaption> 
 
         </div> 
 

 
         <div class="item"> 
 
          <figure> 
 
           <img width=500px height=500px src="http://www.greatgrubclub.com/domains/greatgrubclub.com/local/media/images/medium/4_1_1_kiwi.jpg" alt="Slide2"> 
 
           <!--<div class="carousel-caption">This is a fruit leaf</div>--> 
 
          </figure> 
 
          <figcaption class="carousel-caption">KIWIf</figcaption> 
 
         </div> 
 

 
        </div> <!-- END: Image slides --> 
 

 

 
        <!-- Slide buttons (left,right) buttons --> 
 
        
 
        <a class="left coursel-control" href="#mySlider" role="button" data-slide="prev"> 
 
          <span class="carousel-control-prev-icon" aria-hidden="true"></span> 
 
          <span class="sr-only">Previous</span> 
 
        </a> 
 
        <a class="right coursel-control" href="#mySlider" role="button"> 
 
          <span class="carousel-control-next-icon" aria-hidden="true"></span> 
 
    <span class="sr-only">Next</span> 
 
        </a> 
 

 
       </div> <!-- END: Slider --> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</body> 
 

 
</html>

私は

表示されない、スクロールする権利「インジケータ」が、スクロール、すべてを取得する以下のスニペットは、私が何をやっている見つけてください。違う？

おかげ

出典

2017-02-14 TechnoCorner

あるとしてそれは私のために働いている –

を動作しているようです。 – Korgrue

私はスクロールするための右の "矢"を見ることができません@MosesDavidowitz – TechnoCorner

は、デフォルトのglyphiconsを追加しました、あなたは次/右矢印のdata-slide属性を逃しています。

<html> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width; initital-scale=1"> 
 
    <title> Bootstrap Example</title> 
 

 
    <!-- Bootstrap References --> 
 

 
    <!-- Latest compiled and minified CSS --> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 

 
    <!-- jQuery library --> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 

 
    <!-- Latest compiled JavaScript --> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
    <script src="index.js"></script> 
 
    <link href="index.css" rel="stylesheet" type="text/css" /> 
 
</head> 
 

 
<body> 
 
    <div class="container"> 
 
    <div class="row"> 
 
     <div class="col-sm-12"> 
 
     <div id="mySlider" class="carousel slide" data-ride="carousel"> 
 

 
      <!-- .nav's buttons on the bottom --> 
 
      <ol class="carousel-indicators"> 
 
      <li data-target="#mySlider" data-slide-to="0" class="active"></li> 
 
      <li data-target="#mySlider" data-slide-to="1"></li> 
 
      </ol> 
 

 
      <!-- Image slides --> 
 
      <div class="carousel-inner" role="listbox"> 
 

 
      <div class="item active"> 
 
       <figure> 
 
       <img width=500px height=500px src="http://www.hdwallpapersfreedownload.com/uploads/large/fruits/orange-fruit-with-leaf-hd.jpg" alt="Slide1"> 
 
       <!--<div class="carousel-caption">This is a fruit leaf</div>--> 
 
       </figure> 
 
       <figcaption class="carousel-caption">This is a fruit leaf</figcaption> 
 
      </div> 
 

 
      <div class="item"> 
 
       <figure> 
 
       <img width=500px height=500px src="http://www.greatgrubclub.com/domains/greatgrubclub.com/local/media/images/medium/4_1_1_kiwi.jpg" alt="Slide2"> 
 
       <!--<div class="carousel-caption">This is a fruit leaf</div>--> 
 
       </figure> 
 
       <figcaption class="carousel-caption">KIWIf</figcaption> 
 
      </div> 
 

 
      </div><!-- END: Image slides --> 
 

 

 
<!-- Slide buttons (left,right) buttons --> 
 

 
<a class="left carousel-control" href="#mySlider" 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="#mySlider" role="button" data-slide="next"> 
 
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 
 
    <span class="sr-only">Next</span> 
 
</a> 
 

 
     </div> 
 
     <!-- END: Slider --> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</body>

出典

2017-02-14 21:53:02

問題を解決していただきありがとうございます。しかし、右のアイコンをクリックしてもまだ何もしないように見えます。 – TechnoCorner

@TechnoCornerが私の答えを更新しました。それらの属性を編集するのを忘れてしまった。 –

素晴らしい！ありがとう..私は私の前のコードでクラス "カルーセル - コントロール - prev"を見逃していると思いますか？私はちょうど何が悪くなったのか知りたい。 – TechnoCorner

ブートストラップスライドショー（カルーセル）インジケータが機能しない

答えて

関連する問題