Question

已解决：这是带有正确代码的codepen链接：Codepen

我的角度自举旋转木马在没有“滑动”的情况下静态显示图像，有人知道为什么吗？

这是我的设置：

home.html的：

<div id="slides_control">
 <div>
  <carousel interval="myInterval">
   <slide ng-repeat="slide in slides" active="slide.active">
    <img ng-src="{{slide.image}}">
   </slide>
  </carousel>
 </div>
</div>

APP.JS

angular.module('lbda', ['ngRoute', 'ui.bootstrap', 'lbda.controllers']).
 config(['$routeProvider',
  function($routeProvider) {
   $routeProvider.
    when('/home', {
     templateUrl: 'views/home.html',
     controller: 'CarouselCtrl'
   }).
   otherwise({
    redirectTo: ('/home')
   });
  }
 ]);

CAROUSEL.JS

angular.module('lbda.controllers').
  controller('CarouselCtrl', function ($scope) {
    $scope.active = 0;
    $scope.myInterval = 2000;
    $scope.slides = [
      {image: '../../images/carousel/1.jpg'},
      {image: '../../images/carousel/2.jpg'}
    ];
  })

Answer 1

在ng-repeat下方，您需要箭头的锚点链接：

<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
</a>

<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
</a>

您的转盘还需要id：#myCarousel。

AngularJS bootstrap的轮播不起作用

1 个答案: