私のカルーセルはなぜ機能していないのですか？

私はいくつかのプロジェクトを表示するために小さなカルーセルを設定しようとしています。画像は表示されますが、何らかの理由で、スライドをクリックしてカルーセルを移動させません。誰でも知っている理由は？私のカルーセルはなぜ機能していないのですか？

私はいくつかのことをいろいろ試してみましたが、修正されていません。

ありがとうございます！

<div class="container" style="margin: 50px auto;"> 
      <div> 
       <h4 style="margin: 1em 1em 1em 1em;">Projects</h4> 
       <h6>Take a quick look at some of the projects I've worked on.</h6> 
       <div> 
        <div id="myCarousel" class="carousel slide" data-ride="carousel" style="margin: 50px auto;height:350px;width:600px;"> 
         <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"> 
          <div class="item active"> 
           <img src="img/bg.jpg" alt="Project #1" class="carousel-item"> 
           <div class="carousel-caption"> 
           <h3>Example #1</h3> 
           <p>Description #1</p> 
           </div> 
          </div> 
          <div class="item"> 
           <img src="img/bg.jpg" alt="Project #2" class="carousel-item"> 
           <div class="carousel-caption"> 
            <h3>Example #2</h3> 
            <p>Description #2!</p> 
           </div> 
          </div> 
          <div class="item"> 
           <img src="img/bg.jpg" alt="Project #3" class="carousel-item"> 
           <div class="carousel-caption"> 
            <h3>Example #3</h3> 
            <p>Description #3</p> 
           </div> 
          </div> 
         </div> 

         <a class="left carousel-control" href="#myCarousel" data-slide="prev"> 
         <span class="glyphicon glyphicon-chevron-left"></span> 
         <span class="sr-only">Previous</span> 
         </a> 
         <a class="right carousel-control" href="#myCarousel" data-slide="next"> 
         <span class="glyphicon glyphicon-chevron-right"></span> 
         <span class="sr-only">Next</span> 
         </a> 
        </div> 
       </div> 
      <div> 
     </div>

出典

2017-08-14 mdepencier

あなたはバイオリンを作ることができますしてください。 – codesayan

代わりにあなたの本を追加してみてください：

<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>

は、カルーセルのjsとcssファイルへhrefが正しいことを確認します。

と<head>セクションの第一でこれを追加します。

<script> 
     // Load this when the DOM is ready 
     $(function() { 
      // You used .myCarousel here. 
      // That's the class selector not the id selector, 
      // which is #myCarousel 
      $('#myCarousel').carousel(); 
     }); 
    </script>

が、これは便利ですホープ:)

出典

2017-08-14 12:52:34 Ahmad

私のカルーセルはなぜ機能していないのですか？

答えて

関連する問題