title: Angular: UI-Bootstrap Carouselle
body: <p>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.</p>
  
  <ul>
  <li><strong>I want to get rid of the gray bar on the bottom.</strong></li>
  <li><strong>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?</strong></li>
  </ul>
  
  <p><em>Example pictures of the problem:</em>
  <img src="https://i.stack.imgur.com/1SH3i.png" alt="Picture 1">
  <img src="https://i.stack.imgur.com/WQwo7.png" alt="Picture 2"></p>
  
  <p><em>This is the code I have right now:</em></p>
  
  <p><em>mystyle.css:</em></p>
  
  <pre><code>.headercontainer {
      margin: 50px 0 0 0;
      height: 600px;
      background-color: rgba(0,0,0,0.5) !important;
  }
  </code></pre>
  
  <p><em>project.html:</em></p>
  
  <pre><code>&lt;div class="headercontainer"&gt;
      &lt;uib-carousel active="active" interval="myInterval" no-wrap="noWrapSlides"&gt;
          &lt;uib-slide ng-repeat="slide in slides track by slide.id" index="slide.id"&gt;
              &lt;img ng-src="{{slide.image}}" style="margin:auto;" /&gt;
              &lt;div class="carousel-caption"&gt;
                  &lt;h4&gt;Slide {{slide.id}}&lt;/h4&gt;
                  &lt;p&gt;{{slide.text}}&lt;/p&gt;
              &lt;/div&gt;
          &lt;/uib-slide&gt;
      &lt;/uib-carousel&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><em>app.js:</em></p>
  
  <pre><code>$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
      });
    };
  </code></pre>