AngularJS bootstrap's carousel doesn't work

Question

SOLVED: Here it is codepen link with correct code: Codepen

my angular bootstrap carousel shows images one on the other statically without "sliding", anyone know why?

This is my setup:

HOME.HTML:

<div id="slides_control">
 <div>
  <carousel interval="myInterval">
   <slide ng-repeat="slide in slides" active="slide.active">
    <img ng-src="{{slide.image}}">
   </slide>
  </carousel>
 </div>
</div>

APP.JS

angular.module('lbda', ['ngRoute', 'ui.bootstrap', 'lbda.controllers']).
 config(['$routeProvider',
  function($routeProvider) {
   $routeProvider.
    when('/home', {
     templateUrl: 'views/home.html',
     controller: 'CarouselCtrl'
   }).
   otherwise({
    redirectTo: ('/home')
   });
  }
 ]);

CAROUSEL.JS

angular.module('lbda.controllers').
  controller('CarouselCtrl', function ($scope) {
    $scope.active = 0;
    $scope.myInterval = 2000;
    $scope.slides = [
      {image: '../../images/carousel/1.jpg'},
      {image: '../../images/carousel/2.jpg'}
    ];
  })

Could you add a plunker or fiddle which demos the problem?

cst1992
– cst1992

2016-04-07 07:22:56 +00:00
Commented Apr 7, 2016 at 7:22 — cst1992
– cst1992, Commented Apr 7, 2016 at 7:22
Edited, here is the link: codepen.io/paolopolix/pen/Wwdwbr

ZaitseV
– ZaitseV

2016-04-07 07:33:01 +00:00
Commented Apr 7, 2016 at 7:33 — ZaitseV
– ZaitseV, Commented Apr 7, 2016 at 7:33

cst1992 · Accepted Answer · 2016-04-07 07:48:12Z

1

Below the ng-repeat, you'll need anchor links for the arrows:

<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
    <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">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
</a>

You'll also need an id for your carousel: #myCarousel.

edited Apr 7, 2016 at 7:48

answered Apr 7, 2016 at 7:41

cst1992

3,9481 gold badge32 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

ZaitseV Over a year ago

I've solved the problem (updated codepen: codepen.io/paolopolix/pen/Wwdwbr). But now transitions doesn't work and the text goes under the slides... why?

cst1992 Over a year ago

It seems you were mixing up ui-bootstrap and normal bootstrap. I haven't used ui-bootstrap either, so it wasn't working.

ZaitseV Over a year ago

Yes.. I just used wrong tags 'carousel','slide' instead of 'uib-carousel' and 'uib-slide'.. Any idea for the other probs?

ZaitseV Over a year ago

Solved! For transitions: I was missing the 'ngAnimate' dependency on the app.js; For text: I was using wrong css code. Thanks anyway! :)

Collectives™ on Stack Overflow

AngularJS bootstrap's carousel doesn't work

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related