我正在尝试在我的应用程序上插入幻灯片。我只是将图像堆叠在一起，而不是按其应有的方式播放幻灯片。
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();
}
});
最佳答案
您需要最新的 Angular 版本。检查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.
您还需要添加“bootstrap css”文件
关于javascript - AngularJS 轮播不工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27601338/