Image Slider mit next/prev link

Question

Ich möchte einen Bild-Slider (in Winkel 4), der 5 Bilder zur Zeit mit Prev/Next-Taste auf jeder Seite anzeigt. Neue Bilder, die angezeigt werden sollen, werden nur abgerufen, wenn der Benutzer die Tasten drückt (nicht Karussell, mehr wie Paginierung).

HTML (vereinfacht):

<div class="row"> 
    <div class="col-md-1"> 
     <button (click)="prev()"></button> 
    </div> 
    <div class="col-md-10"> 
     <div *ngFor="let image of images"> 
     <div class="col-md-2"> 
      <img>{{image}}</img> 
     </div> 
     </div> 
    </div> 
    <div class="col-md-1"> 
     <button (click)="next()"></button> 
    </div> 
    </div> 

Thanx :)

Answer 1

Wenn Sie url aller Bilder haben dann diejenigen, die in einem Array setzen und wenn Klick-Methode aufrufen gerade Spur des Index halten, wenn jemand drückt als nächstes die Indexzahl und wenn man prev drückt dann verkleinert man den Index um eins. Im Hinblick <img [src]="imageToShow" />

wie verwenden:

let imageArray = ['x.jpg','y,jpg','z.jpg','m.jpg']; 
let index= 0; 
let imageToShow = ''; 
prev(){ 
    index = index<=0 ? 4 : index--; 
    imageToShow = imageArray[index] ; 

} 
next(){ 
    index = index>=4 ? 0 : index++; 
    imageToShow = imageArray[index] ; 
} 

`

Answer 2

Wenn jemand fragen, wie ich es gelöst:

 <div class="row"> 
     <div class="col-md-1"> 
     <i class="fa fa-chevron-left fa-lg" (click)="prev()" style="cursor: pointer;"></i> 
     </div> 
     <div class="col-md-10 row"> 
     <div *ngFor="let image of imageArrayToDisplay"> 
      <div class="col-md-2"> 
      <img [src]="image" /> 
      </div> 
     </div> 
     </div> 
    </div> 
    <div class="col-md-1"> 
     <i class="fa fa-chevron-right fa-lg" (click)="next()" style="cursor: pointer;"></i> 
    </div> 
    </div> 

Komponente:

displayIndex = 0; 
displaySize = 5; //No of images to show at the same time 
imageArray = ['1.jpg','2,jpg','3.jpg','5.jpg','6.jpg','7,jpg','8.jpg','9.jpg']; 
imageArrayToDisplay: string[] = []; 

ngOnInit() { 
//initially display 5 first images 
this.imageArrayToDisplay = this.imageArray.slice(0, this.displaySize); 
} 

prev() { 
    this.displayIndex = this.displayIndex - 1; 

    // Start of list, start at end of list and move backwords 
    if (this.displayIndex < 0) { 
     this.displayIndex = (this.imageArray.length/this.displaySize) - 1; 
     const start = this.displayIndex * this.displaySize; 
     this.imageArrayToDisplay = this.imageArray.slice(start, (start + this.displaySize)); 
    } else { 
     const start = this.displayIndex * this.displaySize; 
     this.imageArrayToDisplay = this.imageArray.slice(start, (start + this.displaySize)); 
    } 
} 

next() { 
    this.displayIndex = this.displayIndex + 1; 

    // End of list, start from beginning 
    if (this.imageArray.length <= (this.displayIndex * this.displaySize)) { 
     this.imageArrayToDisplay = this.imageArray.slice(0, this.displaySize); 
     this.displayIndex = 0; 
    } else { 
     const start = this.displayIndex * this.displaySize; 
     this.imageArrayToDisplay = this.imageArray.slice(start, (start + this.displaySize)); 
    } 
}