带有下一个/上一个链接的图像滑块

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