Karussell ohne Bibliothek (Angular 2)

Question

Ich versuche, meine eigene Karussell-Komponente für angular 2 Projekt zu schreiben, aber ich weiß nicht, wie es geht. Können Sie mir einige Beispiele ohne Bibliothek geben (ohne ngx-Bootstrap und andere).

Answer 1

Nun, der ganze Sinn der Verwendung einer Bibliothek besteht darin, Wiederholungen von bereits von Bibliotheken ausgeführten Arbeiten zu vermeiden. Wenn Sie Ihre eigene Karussell-Implementierung erstellen möchten, müssen Sie Code, der Teil von Bibliotheken ist, im Wesentlichen neu erstellen.

Angesichts der oben genannten das Beste, was ich beraten kann, ist tatsächlich in Code der vorhandenen Bibliotheken zu suchen, zu verstehen und ihren Code anzupassen. Einige Implementierungen sind ziemlich einfach (< 200 LOC mit Dokumentation). Zum Beispiel sollte das Karussell von ng-bootstrap recht einfach zu folgen:

import { 
    Component, 
    Directive, 
    TemplateRef, 
    ContentChildren, 
    QueryList, 
    Input, 
    OnDestroy, 
    AfterContentChecked, 
    OnInit 
} from '@angular/core'; 
import {NgbCarouselConfig} from './carousel-config'; 

let nextId = 0; 

/** 
* Represents an individual slide to be used within a carousel. 
*/ 
@Directive({selector: 'ng-template[ngbSlide]'}) 
export class NgbSlide { 
    /** 
    * Unique slide identifier. Must be unique for the entire document for proper accessibility support. 
    * Will be auto-generated if not provided. 
    */ 
    @Input() id = `ngb-slide-${nextId++}`; 
    constructor(public tplRef: TemplateRef<any>) {} 
} 

/** 
* Directive to easily create carousels based on Bootstrap's markup. 
*/ 
@Component({ 
    selector: 'ngb-carousel', 
    exportAs: 'ngbCarousel', 
    host: { 
    'class': 'carousel slide', 
    '[style.display]': '"block"', 
    'tabIndex': '0', 
    '(mouseenter)': 'pause()', 
    '(mouseleave)': 'cycle()', 
    '(keydown.arrowLeft)': 'keyPrev()', 
    '(keydown.arrowRight)': 'keyNext()' 
    }, 
    template: ` 
    <ol class="carousel-indicators"> 
     <li *ngFor="let slide of slides" [id]="slide.id" [class.active]="slide.id === activeId" (click)="cycleToSelected(slide.id)"></li> 
    </ol> 
    <div class="carousel-inner"> 
     <div *ngFor="let slide of slides" class="carousel-item" [class.active]="slide.id === activeId"> 
     <ng-template [ngTemplateOutlet]="slide.tplRef"></ng-template> 
     </div> 
    </div> 
    <a class="left carousel-control-prev" role="button" (click)="cycleToPrev()"> 
     <span class="carousel-control-prev-icon" aria-hidden="true"></span> 
     <span class="sr-only">Previous</span> 
    </a> 
    <a class="right carousel-control-next" role="button" (click)="cycleToNext()"> 
     <span class="carousel-control-next-icon" aria-hidden="true"></span> 
     <span class="sr-only">Next</span> 
    </a> 
    ` 
}) 
export class NgbCarousel implements AfterContentChecked, 
    OnDestroy, OnInit { 
    @ContentChildren(NgbSlide) slides: QueryList<NgbSlide>; 
    private _slideChangeInterval; 

    /** 
    * Amount of time in milliseconds before next slide is shown. 
    */ 
    @Input() interval: number; 

    /** 
    * Whether can wrap from the last to the first slide. 
    */ 
    @Input() wrap: boolean; 

    /** 
    * A flag for allowing navigation via keyboard 
    */ 
    @Input() keyboard: boolean; 

    /** 
    * The active slide id. 
    */ 
    @Input() activeId: string; 

    constructor(config: NgbCarouselConfig) { 
    this.interval = config.interval; 
    this.wrap = config.wrap; 
    this.keyboard = config.keyboard; 
    } 

    ngAfterContentChecked() { 
    let activeSlide = this._getSlideById(this.activeId); 
    this.activeId = activeSlide ? activeSlide.id : (this.slides.length ? this.slides.first.id : null); 
    } 

    ngOnInit() { this._startTimer(); } 

    ngOnDestroy() { clearInterval(this._slideChangeInterval); } 

    /** 
    * Navigate to a slide with the specified identifier. 
    */ 
    select(slideId: string) { 
    this.cycleToSelected(slideId); 
    this._restartTimer(); 
    } 

    /** 
    * Navigate to the next slide. 
    */ 
    prev() { 
    this.cycleToPrev(); 
    this._restartTimer(); 
    } 

    /** 
    * Navigate to the next slide. 
    */ 
    next() { 
    this.cycleToNext(); 
    this._restartTimer(); 
    } 

    /** 
    * Stops the carousel from cycling through items. 
    */ 
    pause() { this._stopTimer(); } 

    /** 
    * Restarts cycling through the carousel slides from left to right. 
    */ 
    cycle() { this._startTimer(); } 

    cycleToNext() { this.cycleToSelected(this._getNextSlide(this.activeId)); } 

    cycleToPrev() { this.cycleToSelected(this._getPrevSlide(this.activeId)); } 

    cycleToSelected(slideIdx: string) { 
    let selectedSlide = this._getSlideById(slideIdx); 
    if (selectedSlide) { 
     this.activeId = selectedSlide.id; 
    } 
    } 

    keyPrev() { 
    if (this.keyboard) { 
     this.prev(); 
    } 
    } 

    keyNext() { 
    if (this.keyboard) { 
     this.next(); 
    } 
    } 

    private _restartTimer() { 
    this._stopTimer(); 
    this._startTimer(); 
    } 

    private _startTimer() { 
    if (this.interval > 0) { 
     this._slideChangeInterval = setInterval(() => { this.cycleToNext(); }, this.interval); 
    } 
    } 

    private _stopTimer() { clearInterval(this._slideChangeInterval); } 

    private _getSlideById(slideId: string): NgbSlide { 
    let slideWithId: NgbSlide[] = this.slides.filter(slide => slide.id === slideId); 
    return slideWithId.length ? slideWithId[0] : null; 
    } 

    private _getSlideIdxById(slideId: string): number { 
    return this.slides.toArray().indexOf(this._getSlideById(slideId)); 
    } 

    private _getNextSlide(currentSlideId: string): string { 
    const slideArr = this.slides.toArray(); 
    const currentSlideIdx = this._getSlideIdxById(currentSlideId); 
    const isLastSlide = currentSlideIdx === slideArr.length - 1; 

    return isLastSlide ? (this.wrap ? slideArr[0].id : slideArr[slideArr.length - 1].id) : 
         slideArr[currentSlideIdx + 1].id; 
    } 

    private _getPrevSlide(currentSlideId: string): string { 
    const slideArr = this.slides.toArray(); 
    const currentSlideIdx = this._getSlideIdxById(currentSlideId); 
    const isFirstSlide = currentSlideIdx === 0; 

    return isFirstSlide ? (this.wrap ? slideArr[slideArr.length - 1].id : slideArr[0].id) : 
          slideArr[currentSlideIdx - 1].id; 
    } 
} 

export const NGB_CAROUSEL_DIRECTIVES = [NgbCarousel, NgbSlide]; 

Aber dann wieder, gibt es eine ganze Menge Details in dort so möchte ich Sie glaube nicht, dass wirklich wieder tun alle diese Logik aus kratzen. In jedem Fall können Sie den vollständigen Quellcode sehen in the repository - vielleicht etwas zu lesen und Inspiration zu bekommen.