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.

For a carousel in my opinion best is Swiper. It is in JavaScript so you can use it on any javascript framework. It's easy to make it full screen in angular. Call me if you need a tip. — Mises, Dec 25 '19 at 20:46
You might have mistake in `url(...)` there should be single quotes ' around path. — Mises, Dec 25 '19 at 20:57
No issues with the URL, just issues with getting the background to cover the whole screen and be able to move between them. — Rolando, Dec 25 '19 at 23:38
I answered a question there you have an example how in css you can cover/center full div by `background-image:`. — Mises, Dec 25 '19 at 23:43

score 1 · Answer 1 · answered Dec 25 '19 at 19:43

you can try this 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>

Mises · Accepted Answer · 2019-12-25T21:04:13.953

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

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

2 Answers2