Действительно странное явление с угловой загрузочной каруселью

Я хочу использовать 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.

Теперь получается, что рамка карусели видна, и здесь также есть индикатор, но не все изображения отображаются, и положение также неправильное, как показано на следующем рисунке.

Рис. 1

Из рисунка видно, что индикатор может отображать 5 точек, а исходный код из Chrome также подтверждает, что здесь есть 5 изображений.

Рис. 2

Так что здесь происходит?

0 ответов

Другие вопросы по тегам