Bootstrap Carousel not sliding at start

Problem

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…

Problem courtesy of: NDY

Solution

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.

Solution courtesy of: NDY

View additional discussion.