Peter Ward Peter Ward - 1 year ago 127
AngularJS Question

UI-Bootstrap Carousel won't cooperate with my Angular App. Why?

I've tried everything. It's like nothing I do can get this damn carousel working. It's bringing in the proper data from the controller, but it doesn't format it like a carousel -- everything's showing and the words are stacked on top of each other.

Here are my angular app dependencies:

var app = angular.module('app', ['ngRoute', 'ui.bootstrap', 'ui.bootstrap.tpls', 'ngAnimate', 'ngTouch'])

Here's my markup:

<link href="//" rel="stylesheet"> <link rel="stylesheet" href="style/main.css">
<link rel="stylesheet" href="style/home.css">
<link rel="stylesheet" href="bower_components/animate.css/animate.css">
<link rel="stylesheet" href="bower_componenets/angular-bootstrap/ui-bootstrap-csp.css">
<link rel="stylesheet" href="bower_components/angular-carousel/dist/angular-carousel.css">

<script src=""></script>
<script src=""></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
<script src="bower_components/angular-animate/angular-animate.js"></script>
<script src=""></script>
<script src=""></script>
<script src="bower_components/angular-touch/angular-touch.js"></script>
<script src="bower_components/angular-carousel/dist/angular-carousel.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers/homeController.js"></script>


<div id="myCarousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<uib-carousel class="carousel-inner" role="listbox">
<uib-slide ng-repeat="slide in slides" ng-class="{active : $first}">
<img ng-src="{{slide.image}}" style="margin:auto;">
<div class="carousel-caption">
<p>{{slide.byline}} on {{}}</p>
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev" ng-non-bindable>
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next" ng-non-bindable>
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>

I just don't get it. Even when I discarded doing this with
and hardcoded all the data directly into the markup, the arrows still were all glitchy and went backwards or would get stuck on the second slide. I don't know, maybe there's something wrong with my dependencies. Whatever the case, it's frustrating as hell not being able to get such a "simple" component working.

Thanks in advance,


Answer Source

The uib-carousel syntax (notice the uib- prefix), has been introduced in angular ui-bootstrap 0.14.0, but the version you have is 0.13.4, where the directive is named carousel, i.e. without prefix.

Either upgrade to 0.14, or if you stay in 0.13, removing the uib- prefix will do the trick.


    <uib-carousel ...>
        <uib-slide ...>
           <!-- ... -->


    <carousel ...>
        <slide ...>
           <!-- ... -->

As a side note, remove angular-carousel.(js|css) from the dependencies, as it is another carousel solution, but you are obviously using the ui-bootstrap one.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download