CODEWITHSUNDEEP
javascripthtmlcsstwitter-bootstrap
Doug Smith
Doug Smith

Reputation: 29326

Why is the carousel from Twitter Bootstrap not working for me?

I have the following code:

<html>
    <head>
        <link href="css/bootstrap.min.css" rel="stylesheet" />
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
        <script>
          $(document).ready(function(){
            $('.carousel').carousel();
          });
        </script>
    </head>

    <body>
        <div id="welcome-carousel" class="carousel slide"><!-- class of slide for animation -->
          <div class="carousel-inner">
            <div class="item active"><!-- class of active since it's the first item -->
              <img src="img/image1.png" alt="" />
            </div>
            <div class="item">
              <img src="img/image4.png" alt="" />
            </div>
            <div class="item">
              <img src="img/image3.png" alt="" />
              <div class="carousel-caption">
                <p>Hello to the WORLD!</p>
              </div>
            </div>
            <div class="item">
              <img src="img/image2.png" alt="" />
              <div class="carousel-caption">
                <p>Hello to the WORLD!</p>
              </div>
            </div>
            <div class="item">
              <img src="img/image1.png" alt="" />
              <div class="carousel-caption">
                <p>Hello to the WORLD!</p>
              </div>
            </div>
          </div><!-- /.carousel-inner -->
          <!--  Next and Previous controls below
                href values must reference the id for this carousel -->
            <a class="carousel-control left" href="#welcome-carousel" data-slide="prev">&lsaquo;</a>
            <a class="carousel-control right" href="#welcome-carousel" data-slide="next">&rsaquo;</a>
        </div>
    </body>
</html>

Which is in an index.html file. Within the same directory there is a directory called js, with boostrap.min.js in it, and a css directory called css, with boostrap.min.css in it. Lastly, a folder call img with the haphling images TB gave when I downloaded it, and the images for my gallery.

Basically, it looks like this: http://i.imgur.com/YnRtq.png

When I click the arrows, the image doesn't change. Also, I want the arrows to be within the image, not off to the right like that.

Upvotes: 1

Views: 7199

Answers (3)

Jonny Shaw
Jonny Shaw

Reputation: 117

Was having issues with the carousel on iOS Safari, found a thread expressing that the included .css file was wrongly neglecting to include browser prefixes for some browsers. My error was slightly different (failed to load slide images) I replaced my previous bootstrap.css file with the current version (had been using 3.2.1 updated to 3.3.2) and this solved the problem. Gotta love an easy fix.

Upvotes: 0

Sashi
Sashi

Reputation: 686

Use all the element of Bootstrap Carousel in your HTML and write-down the Jquery like this

<script type="text/javascript">
!function ($) {
     var $window = $(window)

    $(document).ready(function() {
        $('.carousel').carousel();
    });
} (window.jQuery)
</script>

Upvotes: 0

nickhar
nickhar

Reputation: 20913

It looks as though you're not pulling in bootstrap-carousel.js - which is required to use the Carousel functionality.

I don't know from your code above if you're building a customized version of Bootstrap (available here: http://twitter.github.com/bootstrap/customize.html), but if you're not you need to download/include (or remotely call):

<script src="js/bootstrap-carousel.js"></script>

In addition to the minified base versions.

One novel addition/option you may wish to consider is: http://www.bootstrapcdn.com/ which is a great idea and may come in handy.

You've also excluded the http: in calling //ajax.googleapis.com

Hope this helps.

Upvotes: 2

Related Questions