In my current project, I am incorporating the Angular UI Bootstrap carousel and want to customize it by using my own images. Below is the code snippet for the Carousel Controller that I have implemented:
.controller('CarouselCtrl', function ($scope) {
$scope.myInterval = 2000;
var slides = $scope.slides = [];
$scope.addSlide = function() {
var newWidth = 1 + slides.length + 1;
slides.push({
image: '../img' + newWidth,
text: ['More','Extra','Lots of','Surplus'][slides.length % 4] + ' ' +
['Cats', 'Kittys', 'Felines', 'Cutes'][slides.length % 4]
});
};
for (var i=0; i<4; i++) {
$scope.addSlide();
}
})
While I understand that the addSlide function populates an array with images and iterates over them, I am facing difficulties in changing the source path of the images to a folder within the project directory. Currently, the images are not being displayed as expected. The img folder is located one level above the .js file containing the Carousel Controller. Any guidance or suggestions on resolving this issue would be greatly appreciated. Thank you!