Angular js Karussell kann nicht zwischen thumbnail

Question

das ist meine Sicht für das eckige ui Karussell und was ich stecke in ist, mit den Thumbnails, die ich habe, zu schieben.

<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> 

und hier ist mein Controller:

$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; 
    }; 

in meinem Controller ich diese Show Thumbnails haben, das ist, wo ich meine Daumen Nägel bekommen erreichte ich mein Punkt ein Thumbnails zu haben, aber ich kann das nicht bekommen Schieben Sie es und machen Sie es aktiv, so dass es sich ändert.

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; 
    }; 

das ist meine Arbeitsansicht:

<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>