I have a carousel example from Bootstrap :

And I get everything loaded, but it doesn't change images when i click on either the sides or the little buttons in the center

<div class="carousel slide" data-ride="carousel">
                    <!-- Indicators -->
                    <ol class="carousel-indicators">
                        <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                        <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                    </ol>

                    <!-- Wrapper for slides -->
                    <div class="carousel-inner">
                        <div class="item active">
                            <img src="img1.jpg" style="width:360px;height:360px"/>
                        </div>
                        <div class="item">
                            <img src="img2.jpg" class="img-responsive" />
                        </div>
                    </div>

                    <!-- Controls -->
                    <a class="carousel-control left" href="#carousel-example-generic" data-slide="prev">
                        <span class="icon-prev"></span>
                    </a>
                    <a class="carousel-control right" href="#carousel-example-generic" data-slide="next">
                        <span class="icon-next"></span>
                    </a>

                </div>

It's practically the same, however, I think I'm not importing the right files.

Can you tell what do I need to have imported for this too work (aside from bootstrap.css file, which I do)

I have a carousel example from Bootstrap :

http://getbootstrap./javascript/#carousel

And I get everything loaded, but it doesn't change images when i click on either the sides or the little buttons in the center

<div class="carousel slide" data-ride="carousel">
                    <!-- Indicators -->
                    <ol class="carousel-indicators">
                        <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                        <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                    </ol>

                    <!-- Wrapper for slides -->
                    <div class="carousel-inner">
                        <div class="item active">
                            <img src="img1.jpg" style="width:360px;height:360px"/>
                        </div>
                        <div class="item">
                            <img src="img2.jpg" class="img-responsive" />
                        </div>
                    </div>

                    <!-- Controls -->
                    <a class="carousel-control left" href="#carousel-example-generic" data-slide="prev">
                        <span class="icon-prev"></span>
                    </a>
                    <a class="carousel-control right" href="#carousel-example-generic" data-slide="next">
                        <span class="icon-next"></span>
                    </a>

                </div>

It's practically the same, however, I think I'm not importing the right files.

Can you tell what do I need to have imported for this too work (aside from bootstrap.css file, which I do)

• javascript
• jquery
• html
• css
• twitter-bootstrap

• please take a look at my answer below... – Nicolai Commented Feb 27, 2014 at 10:59

4 Answers 4

You forgot to specify id of div with class carousel: it should be the same as data-target attribute of li elements: JSFiddle example

You also can see in the external files on jsfiddle page the libraries it uses.

<div class="carousel slide" data-ride="carousel" id="carousel-example-generic">
    <!-- Indicators -->
    <ol class="carousel-indicators">
        <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
        <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner">
        <div class="item active">
            <img src="img1.jpg" style="width:360px;height:360px"/>
        </div>
        <div class="item">
           <img src="img2.jpg" class="img-responsive" />
        </div>
    </div>

    <!-- Controls -->
    <a class="carousel-control left" href="#carousel-example-generic" data-slide="prev">
        <span class="icon-prev"></span>
    </a>
    <a class="carousel-control right" href="#carousel-example-generic" data-slide="next">
        <span class="icon-next"></span>
    </a>
</div>

You need 3 external files which are,

Css

http://getbootstrap./dist/css/bootstrap.min.css

Scripts

https://ajax.googleapis./ajax/libs/jquery/1.11.0/jquery.min.js
http://getbootstrap./dist/js/bootstrap.min.js

Full Code

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Bootstrap Carousel Demo</title>
  <link rel="stylesheet" href="http://getbootstrap./dist/css/bootstrap.min.css"/>
  <script src="https://ajax.googleapis./ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script src="http://getbootstrap./dist/js/bootstrap.min.js"></script>
</head>
<body>
<div data-ride="carousel" class="carousel slide" id="carousel-example-generic">
      <ol class="carousel-indicators">
        <li class="active" data-slide-to="0" data-target="#carousel-example-generic"></li>
        <li data-slide-to="1" data-target="#carousel-example-generic" class=""></li>
        <li data-slide-to="2" data-target="#carousel-example-generic" class=""></li>
      </ol>
      <div class="carousel-inner">
        <div class="item active">
          <img alt="First slide" data-src="holder.js/900x500/auto/#777:#555/text:First slide" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI5MDAiIGhlaWdodD0iNTAwIj48cmVjdCB3aWR0aD0iOTAwIiBoZWlnaHQ9IjUwMCIgZmlsbD0iIzc3NyIvPjx0ZXh0IHRleHQtYW5jaG9yPSJtaWRkbGUiIHg9IjQ1MCIgeT0iMjUwIiBzdHlsZT0iZmlsbDojNTU1O2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1zaXplOjU2cHg7Zm9udC1mYW1pbHk6QXJpYWwsSGVsdmV0aWNhLHNhbnMtc2VyaWY7ZG9taW5hbnQtYmFzZWxpbmU6Y2VudHJhbCI+Rmlyc3Qgc2xpZGU8L3RleHQ+PC9zdmc+">
        </div>
        <div class="item">
          <img alt="Second slide" data-src="holder.js/900x500/auto/#666:#444/text:Second slide" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI5MDAiIGhlaWdodD0iNTAwIj48cmVjdCB3aWR0aD0iOTAwIiBoZWlnaHQ9IjUwMCIgZmlsbD0iIzY2NiIvPjx0ZXh0IHRleHQtYW5jaG9yPSJtaWRkbGUiIHg9IjQ1MCIgeT0iMjUwIiBzdHlsZT0iZmlsbDojNDQ0O2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1zaXplOjU2cHg7Zm9udC1mYW1pbHk6QXJpYWwsSGVsdmV0aWNhLHNhbnMtc2VyaWY7ZG9taW5hbnQtYmFzZWxpbmU6Y2VudHJhbCI+U2Vjb25kIHNsaWRlPC90ZXh0Pjwvc3ZnPg==">
        </div>
        <div class="item">
          <img alt="Third slide" data-src="holder.js/900x500/auto/#555:#333/text:Third slide" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI5MDAiIGhlaWdodD0iNTAwIj48cmVjdCB3aWR0aD0iOTAwIiBoZWlnaHQ9IjUwMCIgZmlsbD0iIzU1NSIvPjx0ZXh0IHRleHQtYW5jaG9yPSJtaWRkbGUiIHg9IjQ1MCIgeT0iMjUwIiBzdHlsZT0iZmlsbDojMzMzO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1zaXplOjU2cHg7Zm9udC1mYW1pbHk6QXJpYWwsSGVsdmV0aWNhLHNhbnMtc2VyaWY7ZG9taW5hbnQtYmFzZWxpbmU6Y2VudHJhbCI+VGhpcmQgc2xpZGU8L3RleHQ+PC9zdmc+">
        </div>
      </div>
      <a data-slide="prev" href="#carousel-example-generic" class="left carousel-control">
        <span class="glyphicon glyphicon-chevron-left"></span>
      </a>
      <a data-slide="next" href="#carousel-example-generic" class="right carousel-control">
        <span class="glyphicon glyphicon-chevron-right"></span>
      </a>
    </div>
</body>
</html>

Live Demo

You have to reference the following three files:

jQuery  
Bootstrap javascript file (.js) 
Bootstrap stylesheet file (.css)

It is very important that you reference jQuery BEFORE bootstrap.

You can alternatively reference them from a CDN. Then you are absolutely sure that you are not having any problems with your local referencing of files.

 <link href="//netdna.bootstrapcdn./bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
 <script src="//ajax.googleapis./ajax/libs/jquery/1.10.2/jquery.min.js type="text/javascript"></script>
 <script src="//netdna.bootstrapcdn./bootstrap/3.1.1/js/bootstrap.min.js" type="text/javascript"></script>

Late to the party, but when using require, you'll also need the transition.js file.

So this is what your config file would look like...

js

...
'paths': {
     'carousel': 'plugins/bootstrap/carousel',
     'transition': 'plugins/bootstrap/transition'
},
'shim': {
    'carousel': {
        'deps': ['jquery', 'transition']
    }
...
}
...

Then in your main module you can load it like this:

js

define([
    'carousel'
], function () {

...

});