Question

我试图创建在角6的图像滑块，但我不能够导航到不同的图像。我正在使用输入标签上传图像，并将其存储在名为“图像”的数组中。

在活动图像都应该幻灯片容器和要被显示可以通过点击它下面的指示点被选择的图像的约束内显示。到目前为止，我已经尝试将一个类绑定到img元素以显示活动图像。问题之一是仅显示一个点。

这是我的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%;
}

使用更新后的代码检查您的snippet

如何使用ngClass在Angular中创建幻灯片显示？

1 个答案: