Угловая: UI-Bootstrap Carouselle

Question

Я пытаюсь работать с ui-угловой библиотекой. Я работаю с карусели изображения, он работает нормально, , но я не могу получить css правильным способом.

• Я хочу избавиться от серой полосы на дне.
• Вторая проблема css, возможно, связана с первой, я хочу автоматически масштабировать изображение в нем до максимальной высоты или максимальной ширины. А также, я не могу получить изображения стрелки сбоку для загрузки, не входят ли они в ui-угловой загрузчик?

Пример фотографии проблемы:

Это код, я прямо сейчас:

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

Серое вы видите вокруг слайдов просто заполнить пространство с помощью UI-бутстрапа ваших изображений не соответствуют полной высоте и ширине карусели. Вы можете просто применить фиксированную высоту и ширину к вашему контейнеру div, а затем применить ту же высоту и ширину (или немного меньше) к вашим изображениям.

Например (используя встроенный стиль):

<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> 

Поиграйте с размерами пока вы не получите его, как вы хотите.