如何在 Angular 中的 ngx owl carousel 中设置活动幻灯片
How to set the active slide in ngx owl carousel in Angular
我正在尝试根据索引将幻灯片设置为活动幻灯片。我试图将 类 设置为活动和居中。以下示例中的 newsId 值来自我正在获取并验证的另一个页面。
<owl-carousel-o [options]="newsOptions" class="slider-service">
<ng-template carouselSlide [ngClass]="{'active center': news.newsId == newsId}" *ngFor="let news of newsSlides">
.....
</ng-template>
</owl-carousel-o>
还有其他方法可以设置活动幻灯片吗?
您必须使用 owlCar.to(slideIndex:string) 函数。
为每张幻灯片设置 ID:
<owl-carousel-o [options]="newsOptions" class="slider-service">
<ng-template carouselSlide *ngFor="let news of newsSlides" [id]="news.newsId">
.....
</ng-template>
</owl-carousel-o>
然后在您的组件中定义 owl 旋转木马变量并像这样设置活动幻灯片
@Component({
selector: 'app-news',
templateUrl: './news.component.html',
styleUrls: ['./news.component.scss']
})
export class NewsComponent implements OnInit {
@Input() newsId: string;
@ViewChild('owlCar', { static: false }) owlCar: any;
ngOnInit(): void {
this.owlCar.to(this.newsId);
}
}
记住 newsId 和 news.id 必须是字符串。
我正在尝试根据索引将幻灯片设置为活动幻灯片。我试图将 类 设置为活动和居中。以下示例中的 newsId 值来自我正在获取并验证的另一个页面。
<owl-carousel-o [options]="newsOptions" class="slider-service">
<ng-template carouselSlide [ngClass]="{'active center': news.newsId == newsId}" *ngFor="let news of newsSlides">
.....
</ng-template>
</owl-carousel-o>
还有其他方法可以设置活动幻灯片吗?
您必须使用 owlCar.to(slideIndex:string) 函数。
为每张幻灯片设置 ID:
<owl-carousel-o [options]="newsOptions" class="slider-service">
<ng-template carouselSlide *ngFor="let news of newsSlides" [id]="news.newsId">
.....
</ng-template>
</owl-carousel-o>
然后在您的组件中定义 owl 旋转木马变量并像这样设置活动幻灯片
@Component({
selector: 'app-news',
templateUrl: './news.component.html',
styleUrls: ['./news.component.scss']
})
export class NewsComponent implements OnInit {
@Input() newsId: string;
@ViewChild('owlCar', { static: false }) owlCar: any;
ngOnInit(): void {
this.owlCar.to(this.newsId);
}
}
记住 newsId 和 news.id 必须是字符串。