CODEWITHSUNDEEP
javascriptjqueryhtmltwitter-bootstrap
Matthew Snyder
Matthew Snyder

Reputation: 448

Bootstrap carousel not initiating

I cannot get Bootstrap Carousel to start, um, carousel-ing. Below is all the code that is involved with what I'm trying to do. When it renders in the browser, all I see are two images, one above the other, and a less-than and greater-than beneath them. It's just rendering the DIVs as defined by the HTML as opposed to rendering in a Carousel. I verified that the jQuery.ready function is being called, and is calling the code to initialize the carousel. I also tried this on multiple browsers - IE9, Chrome, and Firefox. I'm running out of ideas. Any help would be appreciated. Thanks!

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>

    <link type="text/css" href="styles/carousel.css" />

    <script type="text/javascript" src="Scripts/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="Scripts/bootstrap-transition.js"></script>
    <script type="text/javascript" src="Scripts/bootstrap-carousel.js"></script>

</head>
<body>
    <script type="text/javascript">

        $(function () {
            $('#carousel').carousel();
        });

    </script>

    <div id="carousel" class="carousel">

      <div class="carousel-inner">

        <div class="item active">
           <img src="images/APM_icon_big.png" alt="Some Alt Text" />
           <div class="carousel-caption">
             Some caption
           </div>
         </div>

        <div class="item">
           <img src="images/appdev_icon_big.png" alt="Some Alt Text" />
           <div class="carousel-caption">
             Some caption
           </div>
         </div>

        …

      </div>

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

    </div>
</body>
</html>

Upvotes: 0

Views: 760

Answers (2)

Matthew Snyder
Matthew Snyder

Reputation: 448

I figured it out. I was missing a rel="stylesheet" in my LINK tag!

Upvotes: 0

Sherbrow
Sherbrow

Reputation: 17379

It seems to be working just fine in this fiddle

Be sure to include the styles defined by bootstrap for the carousel : the css included in the fiddle comes from the twitter-bootstrap custom download page selecting only the JS components > Carousel.

It might not hurt to put your <script> inside the <head> or at the end of your page.

Upvotes: 1

Related Questions