Действительно странное явление с угловой загрузочной каруселью
Я хочу использовать ui.bootstrap.carousel в моем проекте, HTML-код выглядит следующим образом:
<div class="col-md-8">
<div style="height: 300px">
<div uib-carousel active="active" interval="carouselInterval" no-wrap="noWrapSlides">
<div uib-slide ng-repeat="slide in slides">
<img ng-src="{{slide.path}}" style="margin:auto;">
</div>
</div>
</div>
</div>
<script type="text/javascript" src="/bower_components/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/bower_components/angular-animate/angular-animate.min.js"></script>
<script type="text/javascript" src="/bower_components/angular-sanitize/angular-sanitize.min.js"></script>
<script type="text/javascript" src="/bower_components/angular-touch/angular-touch.min.js"></script>
<script type="text/javascript" src="/bower_components/angular-resource/angular-resource.min.js"></script>
<script type="text/javascript" src="/bower_components/angular-ui-router/release/angular-ui-router.min.js"></script>
<script type="text/javascript" src="/bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>
Код Javascript выглядит следующим образом:
var anl = angular.module('anl', ['ui.router', 'ngAnimate', 'ngSanitize', 'ui.bootstrap', 'ngTouch']);
anl.controller('HomeCtrl', ['$scope', '$http', function($scope, $http) {
$scope.carouselInterval = 5000;
$scope.items = 3;
var init = function() {
$http.get('/api/image?category=主页图片')
.then(function(res) {
$scope.slides = res.data;
console.log(res.data);
}, function(err) {
console.log(err);
});
}();
}]);
Все зависимости установлены через Bower, и все они являются последней версией от Bower.
Теперь получается, что рамка карусели видна, и здесь также есть индикатор, но не все изображения отображаются, и положение также неправильное, как показано на следующем рисунке.
Из рисунка видно, что индикатор может отображать 5 точек, а исходный код из Chrome также подтверждает, что здесь есть 5 изображений.
Так что здесь происходит?