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

what do you mean by not working? not rending correctly? click on left/right button doesn't work? have you check the js console? what's the browser you are using? what's the version of your bootstrapjs? — Sean, May 22 '14 at 08:07
Do you have several carousels on one page or why don't you call $('#myCarousel')? — Steven, May 22 '14 at 08:08
Have you seen that post : http://stackoverflow.com/questions/9985801/twitter-bootstrap-carousel-slide-doesnt-work?rq=1 ? — Damiii, May 22 '14 at 08:08
@Sean clicking the left/right button does not work. I am using Google Chrome. My bootstrapjs version is v2.3.2 — jpineds, May 22 '14 at 08:11
@intMain good, have you open the chrome console to see if there is any error? — Sean, May 22 '14 at 08:13
@Damiii I have already seen the post. I did what the post said. But still, the left/right button does not work — jpineds, May 22 '14 at 08:15
@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 — jpineds, May 22 '14 at 08:19
maybe you should provide a fiddle. The code seems to be ok so far. — nozzleman, May 22 '14 at 08:21
@iniMain it's pretty clear, jquery is not loaded successfully, `$ is not defined` means jquery object doesn't defined — Sean, May 22 '14 at 08:25
why u not update your bootstrap to latrest and jquery to latest — Dev, May 22 '14 at 08:26

score 0 · Answer 1 · answered May 22 '14 at 08:23

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>

score 0 · Answer 2 · answered May 22 '14 at 08:25

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

score 0 · Answer 3 · answered May 22 '14 at 08:32

@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 :)

score 0 · Accepted Answer · answered May 23 '14 at 00:05

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!

Bootstrap Carousel Not Responding

4 Answers4

Linked