Question

enter image description here 我试图在我的应用上插入幻灯片。我没有将幻灯片放在一起工作，而是将图像堆叠在一起。

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控制器：

    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();
}
});

Answer 1

你需要最新的角度版本。检查DOC

AngularJS （需要AngularJS 1.2.x，使用1.2.16测试）

Bootstrap CSS（使用3.1.1版测试）。此版本的库（0.12.0）仅适用于版本3.x中的Bootstrap CSS。 0.8.0是此库的最后一个版本，它支持版本2.3.x中的Bootstrap CSS。

你需要添加＆＃39; bootstrap css＆＃39;文件也

AngularJS Carousel无法正常工作

1 个答案: