如何使 owl-carousel-o 让每个图像在 angular8 中占据整个屏幕？

Question

我正在使用以下库来获得 owl carousel 以与 angular8 一起工作：

https://www.npmjs.com/package/ngx-owl-carousel-o

我尝试遵循以下指南： https://therichpost.com/how-to-implement-owl-carousel-slider-in-angular-8/

我遇到的问题是我希望每个 'owl-item' 占据屏幕的整个高度和宽度，以便覆盖所有内容（每个轮播项目（背景图像）占据屏幕的整个区域。我尝试使用自己的图像并覆盖 owl-item css 以尝试占用更多 space:

.owl-item {
    position: absolute !important;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.17) !important;
    content: '' !important;
    z-index: -1;
}

我想将图片作为背景添加到 div 中，这样我就可以在上面放置文字。

      <div class="owl-item" style="background-image: url(../assets/images/firstimage.jpg);">
          <div class="owl-content">
              <div class="text">
                  Some Text Over Image
              </div>
          </div>
      </div>

虽然好像没有效果。我该怎么做才能让 owl-carousel 占据整个屏幕？我很确定我需要覆盖开箱即用的样式，但它并没有覆盖。

Answer 1

你可以试试这个css

html, body {
    height: 100%;
    margin: 0;
} 

.owl-wrapper-outer {
    height: 100% !important;    
}

.owl-wrapper {
     height: 100%;   
}

.owl-item {
    height: 100%;
}

.b-Amarelo {
    height: 100%;
}

.owl-item h1 {
    margin: 0;
}

<div class="owl-item b-Amarelo" style="background-image: url(../assets/images/firstimage.jpg);">
  <div class="owl-content">
     <div class="text">
         Some Text Over Image
     </div>
   </div>
</div>

Answer 2

不确定它是否适用于该库，但我仍然会写一个答案。

在模板中，您可以根据需要传递来自某个变量的路径。

模板：

<div class="owl-item b-Amarelo" [ngStyle]="setStyles('../assets/images/firstimage.jpg')>
  <div class="owl-content">
     <div class="text">
         Some Text Over Image
     </div>
   </div>
</div>

component.ts

setStyles(imgUrl: string) {
    return {
      'background-image': `url('${imgUrl}')`,
      'background-position': 'center',
      'background-repeat': 'no-repeat',
      'background-size': 'cover'
    }
  }

并制作一个旋转木马容器css:

.carousel-container {
    width: 100vw;
    height: 100vh;
}

如何使 owl-carousel-o 让每个图像在 angular8 中占据整个屏幕？

How to make it so that owl-carousel-o has each image take up the whole screen in angular8?

owl-carousel-2

angular