Glide.js doesn't working when slides coming from server Angular

Question

I have a carousel with glide.js and each slide comes from server. After data has came , when I click to "next" button it have to go to the next slide but suddenly it stops working at all and browser lags.

Here is My html:

<div class="glide">
            <div class="glide__track" data-glide-el="track">
              <ul class="glide__slides">
                <li class="glide__slide"  *ngFor="let movie of movies">
                    <div class="card">
                        <img src="http://image.tmdb.org/t/p/w500/{{movie.poster_path}}" alt="">
            
                        <div class="bg-filter"></div>
                
                        <h1>{{movie.title}}</h1>
                
                    </div>
                </li>
               
              </ul>
            </div>

            <div class="glide__arrows" data-glide-el="controls">
                <button class="glide__arrow glide__arrow--left" data-glide-dir="<">prev</button>
                <button class="glide__arrow glide__arrow--right" data-glide-dir=">">next</button>
            </div>
          </div>

and here is my Ts file:

 ngOnInit(): void {
    this.httpService.getMovies()
    .subscribe({
      next: res => this.movies = res,
      error: error => console.log('error'),
      complete: () => {
        this.movies = this.movies.results.splice(0, 5)
      }
    })
    
  }

  ngAfterViewChecked(): void {
   new Glide('.glide', {
      type: 'carousel',
      startAt: 0,
      perView: 4,
      peek: {
        before: 100,
        after: 100
      } 
    }).mount({ Controls, Breakpoints })
  }```



How can I fix it?

I tried a ngOnChanges life cycle hook. When User clicks on next , than update Glide with method `.update()`, but it doesnt works.