Struggling to incorporate bootstrap, angular, and a carousel to showcase images from local folders on my drive. Unsure how to customize the angular file properly. The example provided in the link below fetches images from the Internet, but I need to modify it for local folders. Any guidance on this would be greatly appreciated.
Here is the source code
Angular File:
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 File:
<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>