[英]Customise NG Bootstrap carousel in Angular
我的Angular项目中有一个ng-bootstrap Carousel,我想更改一些内容,但是却无所适从。
首先,我想在幻灯片更改时产生淡入淡出的效果,此刻下一张图像才出现。
其次,我想拥有自己的箭头和滑动指示器或更改样式! 我试图通过CSS来做到这一点,但是我的代码似乎都没有被接受。
在我的幻灯片组件下面:
images = [1, 2, 3, 4, 5, 6, 7].map(() => `https://picsum.photos/900/500?random&t=${Math.random()}`); paused = false; unpauseOnArrow = false; pauseOnIndicator = false; pauseOnHover = true; @ViewChild('carousel', {static : true}) carousel: NgbCarousel; togglePaused() { if (this.paused) { this.carousel.cycle(); } else { this.carousel.pause(); } this.paused = !this.paused; } onSlide(slideEvent: NgbSlideEvent) { if (this.unpauseOnArrow && slideEvent.paused && (slideEvent.source === NgbSlideEventSource.ARROW_LEFT || slideEvent.source === NgbSlideEventSource.ARROW_RIGHT)) { this.togglePaused(); } if (this.pauseOnIndicator && !slideEvent.paused && slideEvent.source === NgbSlideEventSource.INDICATOR) { this.togglePaused(); } }
幻灯片组件html
<ngb-carousel #carousel interval="3000" [pauseOnHover]="pauseOnHover" (slide)="onSlide($event)"> <ng-template ngbSlide *ngFor="let img of images; index as i"> <div class="picsum-img-wrapper"> <img [src]="img" alt="My image {{i + 1}} description"> </div> </ng-template> </ngb-carousel>
幻灯片组件CSS
.picsum-img-wrapper { img { width: 100vw; height: 100vh; max-width: 100%; display: block; margin: 0; } } .carousel-indicators > li { visibility: hidden; box-sizing: content-box; flex: 0 1 auto; width: 30px; height: 30px; border-radius: 20px; margin-right: 3px; margin-left: 3px; text-indent: -999px; cursor: pointer; background-color: #fff; background-clip: padding-box; border-top: 10px solid transparent; border-bottom: 10px solid transparent; opacity: .5; transition: opacity .6s ease; } a.carousel-control-prev, a.carousel-control-next { span { display: none; } }
您需要使用encapsulation:ViewEncapsulation.None(*)
这使您可以覆盖CSS。 在ngb-carousel中,控制项目的类是.carousel-item和carousel-item.active。 carousel-item具有display:none,而carouse-item.active具有display:block,因此您需要按opacity:0和opacity:1进行更改。 使用自己的.css进行过渡。 一些喜欢(请参阅stackblitz
@Component({selector: 'ngbd-carousel-basic',
templateUrl: './carousel-basic.html',
encapsulation: ViewEncapsulation.None,
styles:[`
.carousel-item
{
display:block;
opacity:0;
transition: opacity 2s;
}
.carousel-item.active
{
display:block;
opacity:1;
transition: opacity 2s;
}
.carousel-control-next-icon {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 24 24'%3e%3cpath d='M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm-1.568 18.005l-1.414-1.415 4.574-4.59-4.574-4.579 1.414-1.416 5.988 5.995-5.988 6.005z'/%3e%3c/svg%3e");
} .carousel-control-prev-icon {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 24 24'%3e%3cpath d='M0 12c0 6.627 5.373 12 12 12s12-5.373 12-12-5.373-12-12-12-12 5.373-12 12zm7.58 0l5.988-5.995 1.414 1.416-4.574 4.579 4.574 4.59-1.414 1.416-5.988-6.006z'/%3e%3c/svg%3e");
}
`]
}
)
已更新如果要以“角度样式”制作动画,则也需要覆盖该类
styles:[`
.carousel-item
{
display:block;
}
.carousel-caption
{
display:block
}
并创建一个像
animations: [
trigger('simpleFadeAnimation', [
state('false', style({opacity: 0})),
transition('*=>false', [
style({opacity: 1}),
animate(600 )
]),
transition('false=>*',
animate(600, style({opacity: 1})))
])
]
.html看起来像
<ngb-carousel #carousel *ngIf="images" interval=0 wrap="true" >
<ng-template ngbSlide id="id1">
<div class="picsum-img-wrapper" [@simpleFadeAnimation]="carousel &&carousel.activeId=='id1'">
<img [src]="images[0]" width="100%" alt="Random first slide">
<div class="carousel-caption" >
<h3>First slide label</h3>
<p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
</div>
</div>
</ng-template>
<ng-template ngbSlide id="id2">
<div class="picsum-img-wrapper" [@simpleFadeAnimation]="carousel &&carousel.activeId=='id2'">
<img [src]="images[1]" width="100%" alt="Random second slide">
<div class="carousel-caption" >
<h3>Second slide label</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
</ng-template>
<ng-template ngbSlide id="id3">
<div class="picsum-img-wrapper" [@simpleFadeAnimation]="carousel &&carousel.activeId=='id3'">
<img [src]="images[2]" width="100%" alt="Random third slide">
<div class="carousel-caption" >
<h3>Third slide label</h3>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
</div>
</div>
</ng-template>
</ngb-carousel>
更新了2,如果我们希望幻灯片从左到右移动,可以使用动画
animations: [
trigger('simpleTranslation', [
state('outright', style({ transform: `translateX(100%)` })),
state('outleft', style({ transform: `translateX(-100%)` })),
state('inleft', style({ transform: `translateX(0)` })),
state('inright', style({ transform: `translateX(0)` })),
transition('*=>inleft',[
style({transform:`translateX(-100%)`}),
animate('260ms ease-in')
]),
transition('*=>inright',[
style({transform:`translateX(100%)`}),
animate('260ms ease-in')
]),
transition('*=>outright', [
animate('260ms ease-in', style({ transform: `translateX(-100%)` }))
]),
transition('*=>outleft', [
animate('260ms ease-in',style({ transform: `translateX(100%)` }))
]),
])
]
我们需要在其中获取幻灯片的子视图并使用slide事件
@ViewChildren(NgbSlide) slides: QueryList<NgbSlide>
slideControl: any[] = []
onSlide(event) {
this.slides.forEach((x, index) => {
if (x.id == event.current) {
this.slideControl[index] = 'in' + event.direction
}
if (x.id == event.prev) {
this.slideControl[index] = 'out' + event.direction
}
})
}
.html之类的
<ngb-carousel #carousel *ngIf="images" interval=0 wrap="true" (slide)=onSlide($event)>
<ng-template ngbSlide id="id1">
<div class="picsum-img-wrapper" [@simpleTranslation]="slideControl[0]">
<img [src]="images[0]" alt="Random first slide">
<div class="carousel-caption" >
<h3>First slide label</h3>
<p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
</div>
</div>
</ng-template>
<ng-template ngbSlide id="id2">
<div class="picsum-img-wrapper" [@simpleTranslation]="slideControl[1]">
<img [src]="images[1]" alt="Random second slide">
<div class="carousel-caption" >
<h3>Second slide label</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
</ng-template>
...
</ngb-carousel>
看到另一个堆叠闪电战
(*)ViewEncapsultaion.None不能使.component中的.css适用于所有应用程序。 因此,请谨慎使用它,例如,如果您在组件中编写了一个css h1{color:red}
那么您在应用程序中所有的h1就会变成“红色”
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.