CODEWITHSUNDEEP
htmlcsstwitter-bootstrap-3
Durairaj Saro
Durairaj Saro

Reputation: 3

Carousel in HTML not working

I dont know why this code doesn't work... since i am a beginner i couldn't find whats wrong with this,Thanks in advance to anyone who helps me out 

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

Upvotes: 0

Views: 200

Answers (2)

Yuri
Yuri

Reputation: 3294

You have done some mistake with your copy & paste. This should be your html:

  • Change carousel-slide to carousel slide
  • Add active class to your first slide
  • Use correct Carousel control instead of your wrong ones. The classes for the control should be left carousel-control and not left-carousel-control
  • Close your img tags

  • If you have 3 indicators, you should only have 3 slides

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

Check this W3Schools tut and check this fiddle

If you copy paste code, at least do it right..

Upvotes: 1

Boris K
Boris K

Reputation: 1554

Your img tags are not closed ! 

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

Should be 

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

Upvotes: 0

Related Questions