帶有下一個/上一個鏈接的圖像滑塊

Question

我想製作一個圖像滑塊（角度爲4），在每一面上顯示5個圖像，並且每邊都有上一個/下一個按鈕。只有當用戶按下按鈕（不是輪播，更像分頁）時，纔會顯示新圖像。

HTML（簡體）：

<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> 

感謝名單:)

Answer 1

如果所有圖像的URL，然後把那些在一個數組並調用點擊方法時只保留指數，當軌道有人按下增加索引號，如果按prev則索引號減一。鑑於使用 <img [src]="imageToShow" />

，如：

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

如果有人不知道如何解決它：

 <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> 

組件：

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