javascript - Bootstrap Carousel Not Responding

Question

My bootstrap carousel is not working for some reason. I have rechecked my code again and again but I still couldn't figure out what's wrong with my code. Any help would be appreciated.

These are my API Calls in my HTML:

<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="css/bootstrap.css" rel="stylesheet" type="text/css">
<script src="js/bootstrap.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $('.carousel').carousel()
    });   
</script>   

This is the actual code for the Bootstrap Carousel:

<div id="myCarousel" class="carousel slide"><!-- .carousel -->

    <div class="carousel-inner">
        <div class="active-item"><img src="images/Qatar.jpg" alt="" width="1200"  style="border-radius:10px;" alt="Slide 1"/></div>
        <div class="item"><img src="images/QC.jpg" alt="" width="1200" style="border-radius:10px;" alt="Slide 1"/></div>
    </div>

    <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
    <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>

</div><!-- .carousel -->

Answer 1

Try this fiddle: http://jsfiddle.net/RazGP/3/

A few clean up items:

• removed multiple alt attributes
• changed slide 1 to slide 2 (for slide 2, of course)
• changed active-item to active item
• adjusted fiddle options (left pane):
  • included jQuery 1.7.2
  • included bootstrap
  • set to run on domReady

HTML

<div id="myCarousel" class="carousel slide">
<!-- .carousel -->
    <div class="carousel-inner">
        <div class="item active">
            <img src="images/Qatar.jpg" width="1200" style="border-radius:10px;" alt="Slide 1" />
        </div>
        <div class="item">
            <img src="images/QC.jpg" width="1200" style="border-radius:10px;" alt="Slide 2" />
        </div>
    </div> 

    <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
    <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>

<!-- .carousel -->
</div>