Peter Ward Peter Ward - 21 days ago 14
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="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" 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="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.10.3/TweenMax.min.js"></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="https://cdnjs.cloudflare.com/ajax/libs/angular-ui/0.4.0/angular-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.4/ui-bootstrap.js"></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>
</ol>
<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">
<h1>{{slide.headline}}</h1>
<p>{{slide.byline}} on {{slide.date}}</p>
<h3>{{slide.publication}}</h3>
</div>
</uib-slide>
<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>
<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>
</a>
</uib-carousel>
</div>


I just don't get it. Even when I discarded doing this with
ng-repeat
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,

Peter

Answer

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.

Replace:

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

with:

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

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.

Comments