Карусель угловая динамическая Active Class - PullRequest
Новая
       4

Карусель угловая динамическая Active Class

0 голосов
/ 28 октября 2018

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

          <div class="carousel-inner">
              <div *ngFor="let data of gallery; let i=index" class="item active">
                  <img src="{{ data }}" alt="{{ name }}">
                  <div class="container">
                      <div class="carousel-caption">

                      </div>
                  </div>
              </div>
          </div>

Как сделать только первый динамический слайдер с активным классом в карусели?

1 Ответ

0 голосов
/ 28 октября 2018

Есть много способов сделать это, один простой способ - привязать присвоение класса к какому индексу вы хотите быть активным.Возможно, что-то вроде этого: 

<div class="carousel-inner">
    <div *ngFor="let data of gallery; let i=index" [class]="(i === activeIndex) ? 'active' : 'inactive'">
        <img src="{{ data }}" alt="{{ name }}">
        <div class="container">
            <div class="carousel-caption">

            </div>
        </div>
    </div>
</div>

Где activeIndex - это переменная компонента, которую вы выбираете, которая является индексом элемента данных, который вы хотите активировать.

Или для более детального процесса выбора свяжите его сфункция JavaScript: 

<div class="carousel-inner">
    <div *ngFor="let data of gallery; let i=index" [class]="setClass(data, i)">
        <img src="{{ data }}" alt="{{ name }}">
        <div class="container">
            <div class="carousel-caption">

            </div>
        </div>
    </div>
</div>

А теперь в вашем компоненте: 

setClass(data: DataType, i: number) {
    let class: string = 'inactive';
    /* more complex choice logic to set class = 'active' */
    return class;
}
...