我正在尝试在我的应用(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