Bootstrap Carousel Does Not Work

None of the carousel's buttons are responsive and whenever clicked don't do anything. The first image of the carousel shows up but I can't move on to the other one. Here is a scree

Solution 1:

When I run your code it gives the following error in Firebug:

Error: Bootstrap's JavaScript requires jQuery

This is because jQuery isn't loaded properly in your code.

You can (quick) fix this by adding http:// or https:// to the jQuery URL.

<scriptsrc="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

or

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Solution 2:

For using Bootstrap Carousal your HTML should look like and remember bootstrap.min.js uses jQuery so you shold add a reference of jQuery first :

<scriptsrc="https://code.jquery.com/jquery-2.1.1.min.js"></script><scriptsrc="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css"></script><scriptsrc="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script><scriptsrc="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css"></script><divid="homeCarousel"class="carousel slide"><!-- Menu --><olclass="carousel-indicators"><lidata-target="#myCarousel"data-slide-to="0"class="active"></li><lidata-target="#myCarousel"data-slide-to="1"></li><lidata-target="#myCarousel"data-slide-to="2"></li></ol><!-- Items --><divclass="carousel-inner"><!-- Item 1 --><divclass="item active"><imgsrc="http://lorempixel.com/1500/600/abstract/1"/><divclass="container"><divclass="carousel-caption"><h1>Bootstrap 3 Carousel Layout</h1><p>This is an example layout with carousel that uses the Bootstrap 3 styles.</p><p><aclass="btn btn-lg btn-primary"href="http://getbootstrap.com">Learn More</a></p></div></div></div><!-- Item 2 --><divclass="item"><imgsrc="http://lorempixel.com/1500/600/abstract/2"/><divclass="container"><divclass="carousel-caption"><h1>Changes to the Grid</h1><p>Bootstrap 3 still features a 12-column grid, but many of the CSS class names have completely changed.</p><p><aclass="btn btn-large btn-primary"href="#">Learn more</a></p></div></div></div><!-- Item 3 --><divclass="item"><imgsrc="http://lorempixel.com/1500/600/abstract/3" /><divclass="container"><divclass="carousel-caption"><h1>Percentage-based sizing</h1><p>With "mobile-first" there is now only one percentage-based grid.</p><p><aclass="btn btn-large btn-primary"href="#">Browse gallery</a></p></div></div></div></div><!-- Controls --><aclass="left carousel-control"href="#myCarousel"data-slide="prev"><spanclass="icon-prev"></span></a><aclass="right carousel-control"href="#myCarousel"data-slide="next"><spanclass="icon-next"></span></a></div><script>
        $(function () {
    $('#homeCarousel').carousel({
        interval:2000,
        pause: "false"
    });
    });
  </script>

Here is the fiddle