CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrap
Elad Benda
Elad Benda

Reputation: 36664

failed using bootstrap-carousel.js

Tried to view the following htm, but I don't get the same result as in

http://twitter.github.com/bootstrap/javascript.html - carousel

js/Default.js:

 $(function () {
    //    $('.carousel').carousel({ interval: 2000 })

        $('#myCarousel').carousel()
            });

markup: 

    <head>
        <link href="Resources/Styles/bootstrap.css" rel="stylesheet" type="text/css" />
        <title></title>
    </head>

    <body>
        <h2>Example carousel</h2>
        <p>Watch the slideshow below.</p>
        <div id="myCarousel" class="carousel slide">
            <div class="carousel-inner">
                <div class="item active">
                    <img src="Images/Browser/add.JPG" />
                    <div class="carousel-caption">
                        <h4>First Thumbnail label</h4>
                        <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id
                            elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies
                            vehicula ut id elit.</p>
                    </div>
                </div>
                <div class="item">
                    <img src="Images/Browser/delete.JPG" />
                    <div class="carousel-caption">
                        <h4>Second Thumbnail label</h4>
                        <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id
                            elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies
                            vehicula ut id elit.</p>
                    </div>
                </div>
                <div class="item">
                    <img src="Images/Browser/rename.JPG" />
                    <div class="carousel-caption">
                        <h4>Third Thumbnail label</h4>
                        <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id
                            elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies
                            vehicula ut id elit.</p>
                    </div>
                </div>
            </div>
            <!-- Carousel nav -->
            <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>
        <script src="Resources/Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
        <script type="text/javascript" src="js/Common.js"></script>
        <script type="text/javascript" src="Resources/Scripts/bootstrap-carousel.js"></script>
        <script src="js/Default.js" type="text/javascript"></script>
    </body>

</html>

Upvotes: 1

Views: 10212

Answers (1)

dsummersl
dsummersl

Reputation: 6737

As I mentioned in the comments above if you are only seeing an unformatted list of items that bear no ressemblence to the slide show UI for bootstrap then you are probably not referencing the bootstrap CSS file (maybe you have the wrong URL). Use the 'Web Inspector' or 'Developer Tools' in your browser to make sure that the JS and CSS files you are including are actually being found (you'll see red text if not!).

To help you implement this feature I've created a minimimal working jsfiddle example using your original text:

example implementation

The basic steps required to get the carousel working are:

  1. Format your html correctly with the carousel, carousel-inner, and item classes (which you did do correctly).

  2. Include the bootstrap.css file.

  3. Include the following javascript files: jquery, bootstrap-transition, bootstrap-carousel

Upvotes: 3

Related Questions