CODEWITHSUNDEEP
angularjstwitter-bootstrapcarouselangular-ui-bootstrap
ZaitseV
ZaitseV

Reputation: 179

AngularJS bootstrap's carousel doesn't work

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'}
    ];
  })

Upvotes: 1

Views: 843

Answers (1)

cst1992
cst1992

Reputation: 3931

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.

Upvotes: 1

Related Questions