Problem with loop mode on Angular 9

[ericCamposG]

Angular version: 9.1.3 Library version: 2.0.0-rc.1

Issue: Sometimes (sorry, I know its not random, but I can't find the pattern) the library breaks and I can't load the view where the carousel is implemented. I'm not 100% sure, but I think its related with infinite mode being enabled.

Its been some days with this, all help its very appreciated, and thank you in advance :) I'll provide as much detail as possible, if you need something else, just ask me please.

This is the error:

This is the code implementation: (There are only 2 slides, that's why I check i === 0 and i === 1)

<ngx-hm-carousel
  #carousel
  *ngIf="project"
  [(ngModel)]="index"
  [autoplay-speed]="speed"
  [autoplay]="autoplay"
  [infinite]="infinite"
  [between-delay]="betweenDelay"
  [data]="slides"
  [aniTime]="animationTime"
  [style]="styles"
  class="c-accent"
>
  <section ngx-hm-carousel-container class="content">
    <article
      class="item cursor-pointer"
      ngx-hm-carousel-item
      *ngFor="let slide of slides; let i = index"
    >
      <div>
        <ng-container *ngIf="i === 0">
          <div class="d-flex justify-content-between bg-light-green">
              <! -- Content -->
          </div>
        </ng-container>
        <ng-container *ngIf="i === 1">
          <div class="d-flex justify-content-between bg-light-yellow">
              <! -- Content -->
          </div>
        </ng-container>
      </div>
    </article>
    <ng-template #infiniteContainer></ng-template>
  </section>

  <ng-template #carouselContent let-slide let-i="index">
    <div>
      <ng-container *ngIf="i === 0">
        <div class="d-flex justify-content-between bg-light-green">
          <! -- Content -->
        </div>
      </ng-container>
      <ng-container *ngIf="i === 1">
        <div class="d-flex justify-content-between bg-light-yellow">
            <! -- Content -->
         </div>      
       </ng-container>
    </div>
  </ng-template>
  <ng-template #carouselDot let-model>
    <div
      class="ball bg-accent"
      [class.visible]="model.index === model.currentIndex"
    ></div>
  </ng-template>
</ngx-hm-carousel>

import { LanguageService } from '../../../../services/language.service';
import { Project } from '../../../../shared/brands.model';

@Component({
  selector: 'app-carousel',
  templateUrl: './carousel.component.html',
  styleUrls: ['./carousel.component.scss']
})
export class CarouselComponent {

  @Input() project: Project;
  @Input() styles: string;

  slides = [0, 1];
  index = 0;
  speed = 4000;
  betweenDelay = 0;
  animationTime = 400;
  infinite = true;
  autoplay = true;

  constructor(private languageService: LanguageService) {
  }

  get currentLanguage() {
    return this.languageService.getUserUsedLanguage();
  }
}

[ZouYouShun]

Hi @ericCamposG ,

sorry for being so late to the response.

could you provide an example with https://stackblitz.com/edit/ngx-hm-carousel-seprate-transition-class

I can quite get your problem

[ZouYouShun]

close issue, feel free to reopen if you still need.