Angular Js bootstrap旋转木马

Question

试图使用引导程序，角度和旋转木马，以显示在我的本地驱动器上的各自文件夹中的图像，但坚持如何去调整我的角度文件。这里是一个例子，但这个例子从互联网上挑选图像。我如何去做。 这里是网站的源代码http://www.cssscript.com/demo/responsive-image-carousel-with-angular-js-and-bootstrap-3/#abstract

这里是角文件。

app.controller('portfoliocontroller', ['$scope', '$http', 
    function($scope, $http) { 
    $scope.title = 'Our portfolio'; 
    $scope.w = window.innerWidth; 
    $scope.h = window.innerHeight - 20; 
    $scope.uri = "http://lorempixel.com"; 
    $scope.folders = [ 
     'abstract', 
     'animals', 
     'business', 
     'cats', 
     'city', 
     'food', 
     'night', 
     'life', 
     'fashion', 
     'people', 
     'nature', 
     'sports', 
     'technics', 
     'transport' 
    ]; 
    $scope.images = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]; 

    $scope.currentFolder = $scope.folders[0]; 
    $scope.selectFolder = function(folder) { 
     $scope.currentFolder = folder; 
    }; 
    $scope.activeFolder = function(folder) { 
     return (folder === $scope.currentFolder) ? 'active' : ''; 
    }; 

    } 
]); 

下面是HTML文件

<div class="container"> 
    <!-- Carousel 
     ================================================== --> 
    <div id="myCarousel" class="carousel slide" data-ride="carousel"> 
    <!-- Indicators --> 
    <ol class="carousel-indicators"> 
     <li data-target="#myCarousel" ng-repeat="img in images" class="{active : (img === 0)}" data-slide-to="{{img}}"></li> 
    </ol> 
    <div class="carousel-inner"> 
     <div ng-class="{item: true, active : (img === 0)}" ng-repeat="img in images"> 
     <img ng-src="{{uri}}/{{w}}/{{h}}/{{currentFolder}}/{{img}}" alt="Slide numder {{img}}"> 
     <div class="container"> 
      <div class="carousel-caption"></div> 
     </div> 
     </div> 
    </div> 
    <a class="left carousel-control" data-target="#myCarousel" role="button" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a> 
    <a class="right carousel-control" data-target="#myCarousel" role="button" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span> 
    </a> 
    </div> 
    <!-- /.carousel --> 

    <!-- Fixed navbar --> 
    <div class="navbar navbar-default navbar-fixed-botom" role="navigation"> 
    <div class="container"> 
     <div class="navbar-collapse collapse"> 
     <ul class="nav navbar-nav"> 
      <li ng-repeat="folder in folders" class="{{activeFolder(folder)}}" ng-click="selectFolder(folder)"> <a ng-data-target="#{{folder}}">{{folder}}</a> 
      </li> 
     </ul> 
     </div> 
     <!--/.nav-collapse --> 
    </div> 
    </div> 

Answer 1

如果你正在试图做的一切都适应了图书馆使用您的本地文件夹，你会只是图像文件夹中的碱等代替URI。像这样的东西。

$scope.uri = "path/to/my/images"; 

而且您的标记将引用的文件夹一样的：

<img ng-src="{{uri}}/{{currentFolder}}/{{img}}" alt="Slide numder {{img}}"> 

图像的宽度和高度将图像本身或在CSS中进行格式化。

Answer 2

您可以使用此一个。这完全基于AngularJS和Bootstrap。

https://angular-ui.github.io/bootstrap/#/carousel