Home/ Questions/Q 8784489
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-13T21:06:14+00:00

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

  • 0

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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0