Как создать слайд-шоу в Angular с помощью ngClass? - PullRequest
Новая
       8

Как создать слайд-шоу в Angular с помощью ngClass?

0 голосов
/ 02 февраля 2019

Я пытаюсь создать слайдер изображений в Angular 6, но не могу переходить к другим изображениям.Я загружаю изображения с помощью входного тега и сохраняю их в массиве «images».

Предполагается, что активное изображение будет отображаться в пределах ограничений контейнера слайд-шоу, а отображаемое изображение можно выбрать, щелкнув по указательным точкам под ним.До сих пор я пытался привязать класс к элементу 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;
}

На данный момент отображается только одна точка, и видна только последняя загруженная картинка.Что я делаю не так?

1 Ответ

0 голосов
/ 02 февраля 2019

Вам нужно изменить css 

.slideshow-container img{
  display: none;
}

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

проверить ваш фрагмент с обновленным кодом

...