Angular Js bootstrap旋轉木馬

試圖使用引導程序，角度和旋轉木馬，以顯示在我的本地驅動器上的各自文件夾中的圖像，但堅持如何去調整我的角度文件。這裏是一個例子，但這個例子從互聯網上挑選圖像。我如何去做。這裏是網站的源代碼http://www.cssscript.com/demo/responsive-image-carousel-with-angular-js-and-bootstrap-3/#abstract Angular Js bootstrap旋轉木馬

這裏是角文件。

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>

來源

2016-04-28 Wanjila Abraham

如果你正在試圖做的一切都適應了圖書館使用您的本地文件夾，你會只是圖像文件夾中的鹼等代替URI。像這樣的東西。

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

而且您的標記將引用的文件夾一樣的：

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

圖像的寬度和高度將圖像本身或在CSS中進行格式化。

來源

2016-04-29 07:14:50

謝謝布萊恩，它的工作就像一個魅力.. –

很高興它爲你工作..請標記爲答案 –

您可以使用此一個。這完全基於AngularJS和Bootstrap。

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

來源

2016-04-28 11:27:24 Abhinav

謝謝你的貢獻，但是我希望能達到的是類似的東西。 http://www.cssscript.com/demo/responsive-image-carousel-with-angular-js-and-bootstrap-3/#abstract。這更像循環兩次，通過文件夾以及文件夾內的內容.. –

Angular Js bootstrap旋轉木馬

回答

相關問題