I am currently trying to create an Angular carousel for displaying image slides that are coming from an array. However, I am facing issues as it is not functioning as a slider.
Does anyone have a solution to fix this problem?
//HTML
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="item {{::($index === 0 ? 'active' : '')}}" ng-repeat="img in vehicleImgArr"> <img src="{{img}}">
<div class="container">
<div class="carousel-caption"> </div>
</div>
</div>
</div>
</div>
<ol class="carousel-indicators">
<li data-target="#myCarousel" ng-repeat="img in vehicleImgArr" data-slide-to="{{img}}"></li>
</ol>
//JS
var app = angular.module('VehicleDetails', ['angularUtils.directives.dirPagination']);
app.controller('vehiclefulldetails',['$scope', '$http', function($scope, $http){
if($scope.vehicletrxdetails[0].document_name != null){
$scope.vehicleImg = $scope.vehicletrxdetails[0].document_name;
$scope.vehicleImgArr = $scope.vehicleImg.split(',');
}
}]);
Example: vehicletrxdetails[0].document_name = https://files.allaboutbirds.net/wp-content/uploads/2015/06/prow-featured.jpg, https://www.scientificamerican.com/sciam/cache/file/268F292B-5DDD-4DB1-B5ABC6541A70ECDF_source.jpg
Any assistance on this matter would be greatly appreciated. Thank you in advance.