Question

我在旋转木马下方创建了一个跳转到第一张幻灯片的按钮（代码在幻灯片标签内）：

      <button ng-click="slides[0].active = true">
      Jump to Slide 1
      </button>

每次我使用 Opera 浏览器点击按钮时，滑动动画看起来都很奇怪，旋转木马中的上一个和下一个按钮被锁定（在IE和Firefox中一切正常）。当我点击任何旋转木马指示器时，它再次起作用。

当我在Plunker中复制它时，足够有趣它按预期工作所以我猜这个问题与MeanJs（plunker：http://plnkr.co/edit/K1LCz3NKg29AxLoZLLLJ?p=preview）有关。

meanjs应用程序中的步骤：

为核心模块创建了一个新控制器：

'use strict';
angular.module('core').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();
   }
});

将html代码添加到home.client.view.html（之后）：

<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>
                    <button ng-click="slides[0].active = true">
                        Jump to Slide 1
                    </button>
                </div>

            </slide>
        </carousel>
    </div>
    <div class="row">
        <div class="col-md-6">
            <button type="button" class="btn btn-info" ng-click="addSlide()">Add Slide</button>
        </div>
        <div class="col-md-6">
            Interval, in milliseconds: <input type="number" class="form-control" ng-model="myInterval">
            <br />Enter a negative number or 0 to stop the interval.
        </div>
    </div>
</div>

指令：http://angular-ui.github.io/bootstrap/
版本：0.12.1
Meanjs版本：0.4.0
Opera verison：28.0

任何帮助将不胜感激！

Angular-UI Bootstrap轮播 - 跳转到幻灯片不适用于Opera

0 个答案: