如何使用ngClass在Angular中創建幻燈片顯示？

Question

我正在嘗試在Angular 6中創建圖像滑塊，但無法導航到其他圖像。 我正在使用輸入標簽上傳圖像，並將其存儲在名為“圖像”的數組中。

應該在幻燈片放映容器的限制內顯示活動圖像，並且可以通過單擊位於其下方的指示點來選擇要顯示的圖像。 到目前為止，我已經嘗試將一個類綁定到img元素以顯示活動圖像。 問題之一是僅顯示1個點。

這是我的HTML頁面：

<div *ngIf="images">
    <div class="slideshow-container">
        <img *ngFor="let image of images; let i=index" 
            [src]="image" 
            [ngClass]="{'image-active': selectedindex == i}">  

        <div style="text-align:center"  *ngFor="let dot of images; let i=index">
            <span class="dot" 
                (click)="selectImage(i)"
                [ngClass]="{'active': selectedindex == i}">
            </span>
        </div>
    </div>
</div>

這是我選擇特定圖像的方法：

public selectedindex: number = 0; //Initialized to 0
public images: string[] = null;

selectImage(index : number) {
    console.log("Index: "+index);
    this.selectedindex = index;
    console.log("Selected Index: "+this.selectedindex);
  }

這是CSS：

/* Slideshow container */
.slideshow-container {
  max-width: 1000px;
  max-height: 500px;
  position: relative;
  margin: auto;
}

.image-active {
    display: block;
    width: 100%;
}

/* The dots/indicators */
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #717171;
}

截至目前，僅顯示一個點，並且僅顯示最后上傳的圖像。 我究竟做錯了什么？

Answer 1

您需要更改一些css

.slideshow-container img{
  display: none;
}

.slideshow-container img.image-active {
  display: block;
  width: 100%;
}

使用更新的代碼檢查您的代碼段