2017-02-10 3 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> 
날을하는 데 도움이 사람에게 사전에 감사합니다 이것과 무슨 잘못 찾을 수 없습니다 해달라고 작동하지 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

이어야한다. 첫 번째 슬라이드에 대신 잘못된 사람의

  • 를 사용하여 올바른 회전 목마 제어를 active 클래스를 추가 carousel-slidecarousel slide
    • 변경 : 이것은 당신의 HTML해야합니다. 당신이 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 태그 닫습니다 left carousel-control하지 left-carousel-control

  • 해야한다 fiddle

    붙여 넣기 코드를 복사하는 경우 적어도 올바르게 처리하십시오 ..