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

<script src="js/bootstrap.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

wrong order include jquery before bootstrap

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>

Answer 2

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>

Answer 3

@Sean I already found the error in the chrome console. The errors are:Failed to load resource: net::ERR_FILE_NOT_FOUND, Uncaught TypeError: undefined is not a function, Uncaught ReferenceError: $ is not defined

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> this will inherit the hostname which is file\, so you are not able to find file://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js ,

try <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> instead

I guess you are open the browser from your local disk instead of from a web server :)

Answer 4

Thank you for your suggestions. However, as it turns out, my carousel was not working because I had a tag like this:

<div class="active-item"></div>, 

when it should have been like this:

<div class="item active"></div>.  Basically, my syntax was wrong.  

I thank you still for your kind suggestions!