2017-02-10 9 views
0

を働いていない私はカルーセルは

<!DOCTYPE html> 
    <html> 
    <head> 
     <title>Jothidhal</title> 
     <meta charset = "utf-8"> 
     <meta name = "viewport" content = "width = device-width" , initial-scale = 1> 
     <link rel = "stylesheet" type = "text/css" href = "css/bootstrap.min.css"> 
     <link rel = "stylesheet" type = "text/css" href = "additional.css"> 
     <link href="https://fonts.googleapis.com/css?family=Arsenal:700" rel="stylesheet"> 
    </head> 
    <body> 
     <div class = "container-fluid"> 
     <div id = "My_Carousel" class = "carousel-slide" data-ride = "carousel"> 
      <ol class = "carousel-indicators"> 
      <li data-target = "#My_Carousel" data-slide-to = "0" class = "active"> </li> 
      <li data-target = "#My_Carousel" data-slide-to = "1" > </li> 
      <li data-target = "#My_Carousel" data-slide-to = "2" > </li> 
      </ol> 
      <div class = "carousel-inner" role ="listbox"> 
      <div class = "item"><img src = "images/images 1.jpg" alt = "Durairaj" width = "100%" height = "400px"</div> 
      <div class = "item"><img src = "images/images 2.jpg" alt = "Durairaj" width = "100%" height = "400px"</div> 
      <div class = "item"><img src = "images/images 3.jpg" alt = "Durairaj" width = "100%" height = "400px"</div> 
      <div class = "item"><img src = "images/images 4.jpg" alt = "Durairaj" width = "100%" height = "400px"</div> 
      <div class = "item"><img src = "images/images 5.jpg" alt = "Durairaj" width = "100%" height = "400px"</div> 
      <div class = "item"><img src = "images/images 6.jpg" alt = "Durairaj" width = "100%" height = "400px"</div> 
      </div> 
      <a class = "left-carousel-control" href = "#My_Carousel" role= "button" data-slide = "prev"> 
      <span class = "glyphicon glyphicon-chevron-left"></span> 
      <span class = "sr-only">Previous</span> 
      </a> 
     </div> 
     </div> 
     <script type = "text/javascript" src = "js/bootstrap.min.js"></script> 
     <script type = "text/javascript" src = "js/jquery.js"></script> 
    </body> 
    </html> 
を私を助け誰にも事前のおかげで、このコードは動作しない理由を知っている...私はいただきました!これで間違っている私は見つけることができなかった初心者ですので、いけません
+0

何が起こるのかを説明するのに役立ちます。それだけではうまくいきません:) –

+0

エラーはありますか? –

+0

実際には、出力を得ていない、画像が表示されていない、混乱している! –

答えて

0

imgタグが閉じていません!

<div class = "item"><img src = "images/images 6.jpg" alt = "Durairaj" width = "100%" height = "400px"</div> 

は、あなたがあなたのコピー&ペーストでいくつかのミスを行っている

<div class = "item"><img src = "images/images 6.jpg" alt = "Durairaj" width = "100%" height = "400px"></div> 
+0

imgタグを閉じた後でも、出力が得られません。 –

+0

まずは、カルーセルとスライドの間にスペースが必要です( 'class = 「カルーセルスライド」)。 そして、あなたの 'img'から高さと幅を取り除き、それをcssに入れます。画像は 'height =" 400 "'のようなint値しかサポートしません。 –

1

であるべき。これはあなたのhtmlする必要があります:

  • 変更carousel-slidecarousel slide
  • に代わりに間違ったもののあなたの最初のスライド
  • 使用正しいカルーセルコントロールにactiveクラスを追加します。制御のためのクラスはleft carousel-controlないleft-carousel-control
  • あなたが3つの指標を持っている場合は、あなただけの3枚のスライド

    <div class="container-fluid"> 
        <div id="My_Carousel" class="carousel slide" data-ride="carousel"> 
         <ol class="carousel-indicators"> 
          <li data-target="#My_Carousel" data-slide-to="0" class="active"> </li> 
          <li data-target="#My_Carousel" data-slide-to="1" > </li> 
          <li data-target="#My_Carousel" data-slide-to="2" > </li> 
         </ol> 
    
         <div class = "carousel-inner" role ="listbox"> 
          <div class = "item active"><img src = "images/images 1.jpg" alt = "Durairaj" /></div> 
          <div class = "item"><img src = "images/images 2.jpg" alt = "Durairaj" /></div> 
          <div class = "item"><img src = "images/images 3.jpg" alt = "Durairaj" /></div> 
         </div> 
         <a class="left carousel-control" href="#My_Carousel" 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="#My_Carousel" role="button" data-slide="next"> 
          <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 
          <span class="sr-only">Next</span> 
         </a> 
        </div> 
    </div> 
    

このW3Schools tutをチェックして、これを確認する必要がありますあなたのimgタグ

  • を閉じてする必要がありますfiddle

    貼り付けコードをコピーすると、少なくとも正しい結果が得られます。