Angular: Как получить динамический запуск карусели с библиотекой @ ngu / carousel - PullRequest
Новая
       18

Angular: Как получить динамический запуск карусели с библиотекой @ ngu / carousel

0 голосов
/ 13 июня 2019

У меня есть требование запустить карусель, чтобы начать с динамического индекса, а не с 0. Есть ли у нас какой-либо пакет npm, поддержка Angular 4 или выше.

@ ngu / carousel уже используется,myCarousel.moveTo () не работает для этого senario

1 Ответ

0 голосов
/ 14 июня 2019

Вы можете просто рандомизировать свой первичный массив (массив с изображениями), таким образом, каждый новый просмотр страницы будет видеть различную последовательность в вашей карусели

релевантно 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>

релевантно TS : 

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);
  }
}

проверьте рабочий стекблиц здесь

...