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

Question

I am using the following library to get owl carousel to work with angular8:

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

I tried following the following guide: https://therichpost.com/how-to-implement-owl-carousel-slider-in-angular-8/

The issue I have is I want each 'owl-item' to take up the full height and width of the screen so it covers everything (each carousel item(background image) takes up the full area of the screen. I tried using my own image and overriding owl-item css to try to take up more 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;
}

The way I want to include my images are as a background to a div so that I can put text over it.

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

Though it appears to have no effect. What might I do to be able to make it so that owl-carousel takes up the whole screen? I am pretty sure I need to override the styles that come out of the box, but it is not overriding.

Answer 1

Not sure are it will work for that library but still i'll write an answer.

In a template you can pass path from some variable if you want to.

Template:

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

And make an carousel-container css:

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