Angular 角度:如何使用@ngu/carousel库动态启动旋转木马
我需要启动旋转木马,以动态索引开始,而不是从0开始。我们是否有任何npm软件包,支持Angular 4或更高版本Angular 角度:如何使用@ngu/carousel库动态启动旋转木马,angular,typescript,angular6,carousel,ngu-carousel,Angular,Typescript,Angular6,Carousel,Ngu Carousel,我需要启动旋转木马,以动态索引开始,而不是从0开始。我们是否有任何npm软件包,支持Angular 4或更高版本 @ngu/carousel已经在使用,myCarousel.moveTo()似乎不适用于此senario您可以将主数组(带有图像的数组)随机化,这样页面的每个新视图将在您的carousel中看到不同的序列 相关的HTML: <ngu-carousel #myCarousel [inputs]="carouselConfig" [dataSource]="carouselItem
@ngu/carousel已经在使用,myCarousel.moveTo()似乎不适用于此senario您可以将主数组(带有图像的数组)随机化,这样页面的每个新视图将在您的carousel中看到不同的序列 相关的HTML:
<ngu-carousel #myCarousel [inputs]="carouselConfig" [dataSource]="carouselItems">
<div *nguCarouselDef="let item;" class="item">
<div class="tile">{{item}}</div>
</div>
<button NguCarouselNext class="rightRs">></button>
<button NguCarouselPrev class="leftRs"><</button>
<ul class="myPoint" NguCarouselPoint>
<li *ngFor="let j of myCarousel.pointNumbers; let j = index" [class.active]="j==myCarousel.activePoint" (click)="myCarousel.moveTo(j)"></li>
</ul>
</ngu-carousel>
import { Component, AfterViewInit, ViewChild, ChangeDetectorRef } from '@angular/core';
import { NguCarousel, NguCarouselConfig } from '@ngu/carousel';
@Component({
selector: 'app-simple',
templateUrl: './simple.component.html',
styleUrls: ['./simple.component.css']
})
export class SimpleComponent implements AfterViewInit {
name = 'Angular';
slideNo = 0;
withAnim = true;
resetAnim = true;
@ViewChild('myCarousel') myCarousel: NguCarousel;
carouselConfig: NguCarouselConfig = {
grid: { xs: 1, sm: 1, md: 1, lg: 1, all: 0 },
load: 3,
interval: { timing: 4000, initialDelay: 1000 },
loop: true,
touch: true,
velocity: 0.2
}
carouselItems: any[];
constructor(private cdr: ChangeDetectorRef) {
let myArray: any[] = ['item 1', 'item 2', 'item 3'];
myArray = this.shuffleArray(myArray);
this.carouselItems = myArray;
}
shuffleArray(array) {
for (let i = array.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[array[i], array[j]] = [array[j], array[i]];
}
return array;
}
ngAfterViewInit() {
this.cdr.detectChanges();
}
reset() {
this.myCarousel.reset(!this.resetAnim);
}
moveTo(slide) {
this.myCarousel.moveTo(slide, !this.withAnim);
}
}
检查将
myCarousel.moveTo()
移动到ngAfterViewInit(){}
中,而不是ngOnInit(){}
对我有效
在我以不同于上一个答案的方式克服相同问题时,对旧线程进行了响应。对下面问题的答案有任何反馈吗?