如何使owl-carousel-o的每个图像都以angular8占据整个屏幕？

2024-05-21 • 问答

我正在使用以下库来使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 CSS以尝试占用更多空间：

.owl-item {
    position: absolute !important;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: rgba(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>

尽管它似乎没有作用。我要怎么做才能使猫头鹰传送带占据整个屏幕？我敢肯定，我需要覆盖现成的样式，但这并不是要覆盖。

您可以尝试使用此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>

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

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

模板：

<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占据整个屏幕？

wxryyb 回答：如何使owl-carousel-o的每个图像都以angular8占据整个屏幕？

大家都在问