Bootstrap Carousel not sliding at start

Question

I implemented a bootstrap carousel, which works quite nice, as long as I click at start on the next arrow. Then it starts sliding automatically. If I dont click anything, it just does not start. What can be the problem? I read a lot of posts, tried different things:

• adjusted jquery version: tried from 1.7.1 to 1.9.1, no changes
• looked at my included .js files, checked if they got the right order
• compared html code to the bootstrap example

In the end, I did not find out the error.

My html code looks like that in the end after the page is loaded:

<div class="span9 ng-scope">
<h2>Test Heading</h2>
<div id="myCarousel" class="carousel slide">

    <!-- Carousel Items -->
    <div class="carousel-inner">
        <!-- ngRepeat: headline in headlines --><div ng-class="{active: headlines.indexOf(headline) == 0}" class="item ng-scope active" ng-repeat="headline in headlines">
            <img ng-src="img/partials/home/headings/1112.jpg" alt="" src="img/partials/home/headings/1112.jpg">
            <div class="carousel-caption">
                <a href="#willkommen/neuigkeiten/1" title="Mehr"> <h4 class="ng-binding">Test</h4> </a>
                <p class="ng-binding">
                    Test2
                </p>
            </div>
        </div><div ng-class="{active: headlines.indexOf(headline) == 0}" class="item ng-scope" ng-repeat="headline in headlines">
            <img ng-src="img/partials/home/headings/1113.jpg" alt="" src="img/partials/home/headings/1113.jpg">
            <div class="carousel-caption">
                <a href="#willkommen/neuigkeiten/2" title="Mehr"> <h4 class="ng-binding">Test</h4> </a>
                <p class="ng-binding">
                    Test2
                </p>
            </div>
        </div>
    </div>
    <!-- Carousel Navigation -->
    <a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
    <a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>

My source html code:

<h2>Test Heading</h2>
<div id="myCarousel" class="carousel slide">

    <!-- Carousel Items -->
    <div class="carousel-inner">
        <div ng-class="{active: headlines.indexOf(headline) == 0}" class="item" ng-repeat="headline in headlines">
            <img ng-src="img/partials/home/headings/{{headline.image}}.jpg" alt="">
            <div class="carousel-caption">
                <a href="#willkommen/neuigkeiten/{{headline.id}}" title="Mehr"> <h4>{{headline.header}}</h4> </a>
                <p>
                    {{headline.body|truncate:100}}
                </p>
            </div>
        </div>
    </div>
    <!-- Carousel Navigation -->
    <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>

Includes for the scripts in the index.html:

<script src="lib/angular/angular-1.0.6.min.js"></script>
<script src="lib/angular/angular-1.0.6-resource.min.js"></script>
<script src="lib/jquery/jquery-1.9.1.min.js"></script>
<script src="lib/twitter-bootstrap/js/bootstrap.min.js"></script>
<script src="js/namespace.js"></script>
<script src="js/services.js"></script>
<script src="js/controllers.js"></script>
<script src="js/routes.js"></script>
<script src="js/filters.js"></script>
<link type="text/css" rel="stylesheet" href="css/style.css" />
<link type="text/css" rel="stylesheet" href="lib/twitter-bootstrap/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="lib/twitter-bootstrap/css/bootstrap-responsive.min.css" />

Versions:

• jQuery 1.9.1
• AngularJS 1.0.6
• Bootstrap 2.3.1

Any help is really appreciated.

EDIT: The problem was, that the jquery lib was included after angular js. As I switched it, it worked...

Answer 1

I believe the problem is in how you define the active class on the first element.

When you use ng-class , it will evaluate the class for each item in the list.

Bootstrap carousel works on the basis of the active item being rotated through all the "item" elements inside the carousel.

When you use ng-class="headlines.indexOf(headline) == 0", ANgularJS will most likely evaluate the class of the first item to be "active item", and the second one to be "item".

This is as you expect.

But it will most likely also be preventing the class from changing, as the first item is now forced to be always active , instead of rotating as it should be.

This is not what you would expect.

Instead, I think you want a one time class addition of active, instead of using ng-class to set the first item as active. The other option is to use the angular-ui bootstrap directive ( http://angular-ui.github.io/bootstrap ), which does it in a nicer, more "AngularJS" fashion.

Answer 2

The solution was that I had to change the order of my lib includes:

I changed that:

<script src="lib/angular/angular-1.0.6.min.js"></script>
<script src="lib/angular/angular-1.0.6-resource.min.js"></script>
<script src="lib/jquery/jquery-1.9.1.min.js"></script>

to:

<script src="lib/jquery/jquery-1.9.1.min.js"></script>
<script src="lib/angular/angular-1.0.6.min.js"></script>
<script src="lib/angular/angular-1.0.6-resource.min.js"></script>

and it worked.

Answer 3

I faced the same issue off late and found that bootstrap provides an option to start your carousel sliding at page load which is data-ride="carousel" . This should be added to the top level container. Below is a code snippet.

<div id="myCarousel" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
        // ... 
    </ol>
    <div class="carousel-inner" ng-controller="CarouselDemoCtrl">
        // ...
    </div>
</div>