旋转木马在HTML工作不

我不知道为什么这个代码不工作...因为我是一个初学者我找不到什么错，在此先感谢任何人谁帮助我走出旋转木马在HTML工作不

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

来源

2017-02-10 Durairaj Saro

它确实有助于描述会发生什么，而不是只是它不工作:) –

你有什么错误？ –

其实，先生，我没有得到输出，没有任何图像显示，很困惑！ –

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

来源

2017-02-10 08:03:54

谢谢先生，但即使关闭img标签后，我没有得到输出。 –

嗯，首先，旋转木马和幻灯片之间应该有一个空格（'class = “旋转木马幻灯片”）。然后，从你的'img'中删除高度和宽度，并把它放在css中。图像只支持int值，比如'height =“400”'。 –

你有你的复制粘贴&做了一些错误。这应该是你的HTML：

变化carousel-slide到carousel slide
添加active类的第一张幻灯片
使用正确的旋转木马控制的，而不是你的错误的。该控件的类应该left carousel-control而不是left-carousel-control
闭上你的img标签

如果你有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和检查本fiddle

如果您复制粘贴代码，至少要做到正确..

来源

2017-02-10 09:03:48 Yuri

旋转木马在HTML工作不

回答

相关问题