Angular: UI-Bootstrap Carouselle

Question

I am trying to work with the ui-angular library. I am working with the image carouselle, it works ok, but I cannot get the css the right way.

• I want to get rid of the gray bar on the bottom.
• The second css problem is maybe related to the first, I want to automatically scale the picture in it to the max height or the max width. And also, I cannot get the arrow images on the side to load, are they not included inside the ui-angular bootstrapper?

Example pictures of the problem:

This is the code I have right now:

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
    });
  };

Answer 1

The gray you are seeing around the slides is just the fill space by ui-bootstrap since your images do not fit the full height and width of the carousel. You can simply apply a fixed height and width to your container div, and then apply that same height and width (or slightly less) to your images.

For example (using inline styling):

<div style="height:300px; width: 700px;">
<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; height:300px; width: 700px;" />
        <div class="carousel-caption">
            <h4>Slide {{slide.id}}</h4>
            <p>{{slide.text}}</p>
        </div>
    </uib-slide>
</uib-carousel>

Play around with the sizes until you get it like you want.