背景固定时,如何修复ngfor轮播中未显示的ngfor下一项:

时间:2019-02-16 07:06:36

标签: angular

我正在尝试在我的应用(ngu-carousel)中添加图片滑块。除非我设置背景附件:固定,否则一切似乎都工作正常。用于ngfor中的背景图片。

  <ngu-tile *nguCarouselDef="let item; let i = index; let ani = animate" [@slider]="ani" > <!--  PLease this animation to this tile to see animation. stackblitz have error with animations -->
    <div class="slider-overlay"></div>
    <div class="slider-bg" [ngStyle]="{ 'background-image': 'url(' + item.image + ')'}">
      <div class="slider-content">
          <h1>{{item.title}}</h1>
          {{item.icon}}
      </div>

    </div>

  </ngu-tile>
  <button mat-icon-button NguCarouselPrev class="leftRs" [style.opacity]="myCarousel.isFirst ? 0.5:1"><mat-icon>keyboard_arrow_left</mat-icon></button>
  <button mat-icon-button NguCarouselNext class="rightRs" [style.opacity]="myCarousel.isLast ? 0.5:1"><mat-icon>keyboard_arrow_right</mat-icon></button>

</ngu-carousel>

和CSS

.slider{
  position: relative;
  height: auto;
  .item {
    padding: 0px !important;
   }
  .slider-bg {
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
  }
  .slider-overlay {
    position: absolute;
    width: 100%; 
    height: 100%;
    top: 0; 
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.5); 
    z-index: 1; 
    cursor: pointer;
    background-color: rgba(31, 31, 31, 0.49);
  }
}

https://stackblitz.com/edit/angular-inaiho?file=src%2Fapp%2Fapp.component.ts

0 个答案:

没有答案