Question

这就是我对角度ui旋转木马的看法以及我所陷入的是使用我的缩略图滑动。

 <div class="carousel">
                        <div style="height: 305px">
                            <div uib-carousel  active="slide.active"   interval="myInterval">
                                <div uib-slide ng-repeat="slide in slides track by slide.id" index="slide.id">
                                    <img ng-src="{{slide.image}}" style="margin:auto;">
                                    <div class="carousel-caption">
                                        <h4>Slide {{slide.id}}</h4>
                                        <p>{{slide.text}}</p>
                                    </div>
                                </div>
                            </div>

                        </div>
                        <div class="row">

                            <div class="col-xs-2" ng-repeat="slide in showThumbnails">
                                <img ng-src="{{slide.image}}" style="width:100%" ng-click="setActive(slide.id)">
                            </div>
                        </div>

                    </div>

这是我的控制器：

$scope.myInterval = 5000;
    $scope.thumbnailSize = 5;
    $scope.thumbnailPage = 1;

    var slides = $scope.slides = [];

    $scope.addSlide = function(i) {
      var newWidth = 600 + slides.length;
      slides.push({
        image: '//unsplash.it/' + newWidth + '/300',
        text: [
          'Nice image',
          'Awesome photograph',
          'That is so cool',
          'I love that'][slides.length % 4],
        id: i
      });
    };
    for (var i = 0; i < 4; i++) {
      $scope.addSlide(i);
    }

    $scope.showThumbnails = slides.slice(($scope.thumbnailPage - 1) *
        $scope.thumbnailSize, $scope.thumbnailPage * $scope.thumbnailSize);
    $scope.setActive = function(idx) {
      $scope.slides[idx].active = true;
    };

在我的控制器中我有这个节目缩略图，我得到我的拇指指甲我达到我的观点有缩略图，但我无法得到幻灯片，并让它活跃，所以它改变。

Answer 1

 $scope.myInterval = 5000;
    $scope.thumbnailSize = 5;
    $scope.thumbnailPage = 1;

    var slides = $scope.slides = [];

    $scope.addSlide = function(i) {
      var newWidth = 600 + slides.length;
      slides.push({
        image: '//unsplash.it/' + newWidth + '/300',
        text: [
          'Nice image',
          'Awesome photograph',
          'That is so cool',
          'I love that'][slides.length % 4],
        id: i
      });
    };
    for (var i = 0; i < 4; i++) {
      $scope.addSlide(i);
    }

    $scope.showThumbnails = slides.slice(($scope.thumbnailPage - 1) *
        $scope.thumbnailSize, $scope.thumbnailPage * $scope.thumbnailSize);
    $scope.setActive = function (whatever) {
      $scope.active = whatever;
    };

这就是我的工作观点：

<div class="carousel">
                    <div style="height: 305px">
                        <div uib-carousel  active="active"   interval="myInterval">
                            <div uib-slide ng-repeat="slide in slides track by slide.id" index="slide.id">
                                <img ng-src="{{slide.image}}" style="margin:auto;">
                                <div class="carousel-caption">
                                    <h4>Slide {{slide.id}}</h4>
                                    <p>{{slide.text}}
                                </div>
                                {{active}}
                                {{slide.id}}
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-xs-2" ng-repeat="slide in showThumbnails">
                            <img ng-src="{{slide.image}}" style="width:100%" ng-click="setActive(slide.id)">
                        </div>
                    </div>
                </div>

Angular js carousel在缩略图之间无法更改

1 个答案: