CODEWITHSUNDEEP
javascriptjqueryangularjscarousel
Superunknown
Superunknown

Reputation: 501

AngularJS Carousel not working

enter image description hereI'm trying to insert a slideshow on my app. Instead of the slideshow working as it should, I just get images stacked next to each other.

HTML:

 <head>

<!-- App JS -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-route.min.js">     </script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.0.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-animate.js"></script>
 <script src="js/script.js"></script>
<script src="js/controllers/controllers.js"></script>
<script src="js/controllers/carousel.js"></script>
  rel="stylesheet">
 </head>


<div ng-controller="CarouselDemoCtrl">
<div style="height: 305px">
<carousel interval="myInterval">
  <slide ng-repeat="slide in slides" active="slide.active">
    <img ng-src="{{slide.image}}" style="margin:auto;">
    <div class="carousel-caption">
      <h4>Slide {{$index}}</h4>
      <p>{{slide.text}}</p>
    </div>
  </slide>
 </carousel>
  </div>

carousel.js controller:

    angular.module('financeApp').controller('CarouselDemoCtrl', function ($scope) {
  $scope.myInterval = 5000;
  var slides = $scope.slides = [];
  $scope.addSlide = function() {
  var newWidth = 600 + slides.length + 1;
  slides.push({
  image: 'http://placekitten.com/' + newWidth + '/300',
  text: ['More','Extra','Lots of','Surplus'][slides.length % 4] + ' ' +
    ['Cats', 'Kittys', 'Felines', 'Cutes'][slides.length % 4]
 });
  };
  for (var i=0; i<4; i++) {
  $scope.addSlide();
}
});

Upvotes: 0

Views: 4118

Answers (1)

Kalhan.Toress
Kalhan.Toress

Reputation: 21901

you need latest angular version. check the DOC

AngularJS (requires AngularJS 1.2.x, tested with 1.2.16)

Bootstrap CSS (tested with version 3.1.1). This version of the library (0.12.0) works only with Bootstrap CSS in version 3.x. 0.8.0 is the last version of this library that supports Bootstrap CSS in version 2.3.x.

you need to add 'bootstrap css' file also

Upvotes: 1

Related Questions