Angular：UI-Bootstrap 轮播

Question

我正在尝试使用 ui-angular 库。我正在使用图像轮播，它工作正常， 但我无法以正确的方式获取 css。

• 我想去掉底部的灰色条。
• 第二个css问题可能和第一个有关，我想把里面的图片自动缩放到最大高度或者最大宽度。 而且，我无法加载侧面的箭头图像，它们不包含在 ui-angular 引导程序中吗？

问题的示例图片：

这是我现在的代码：

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-bootstrap 的填充空间，因为您的图像不适合轮播的整个高度和宽度。您可以简单地将固定的高度和宽度应用到您的容器 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>

玩弄尺寸，直到你得到你想要的。