I've been experimenting with the ui-angular library and specifically working with the image carousel feature. While it functions properly, I'm encountering some issues with the CSS styling.
- Firstly, I need to remove the gray bar located at the bottom of the carousel.
- Secondly, I am facing challenges in scaling the images within the carousel to either their maximum height or width automatically. Additionally, I'm struggling to get the arrow images on the sides to load. Could this be because they are not included in the ui-angular bootstrapper?
Here are examples illustrating the problems:
Current code snippet:
mystyle.css:
.headercontainer {
margin: 50px 0 0 0;
height: 600px;
background-color: rgba(0,0,0,0.5) !important;
}
project.html:
<div class="headercontainer">
<uib-carousel active="active" interval="myInterval" no-wrap="noWrapSlides">
<uib-slide ng-repeat="slide in slides track by slide.id" index="slide.id">
<img ng-src="{{slide.image}}" style="margin:auto;" />
<div class="carousel-caption">
<h4>Slide {{slide.id}}</h4>
<p>{{slide.text}}</p>
</div>
</uib-slide>
</uib-carousel>
</div>
app.js:
$scope.myInterval = 5000;
$scope.noWrapSlides = false;
$scope.active = 0;
var slides = $scope.slides = [];
var currIndex = 0;
$scope.addSlide = function() {
slides.push({
image: 'img/projects/photo-1453060113865-968cea1ad53a.jpg',
text: 'Nice image',
id: 0
});
slides.push({
image: 'img/projects/photo-1454165205744-3b78555e5572.jpg',
text: 'Awesome photograph',
id: 1
});
slides.push({
image: 'img/projects/programming.jpg',
text: 'Awesome photograph',
id: 2
});
};