Angular resize issue - Githubissues

Hi 👋

Im using Angular 9 with:

    "ngx-owl-carousel-o": "^3.0.1",

My carousel works great, but does not resize the width (of slides, nor the wrapper) automatically when I resize the browser, or the phone.

How do i fix this?

On a resize of the browser, I want the slides to fit the carousel to 100% of the screen width. At the moment it hangs on the old size in pixels on the element.

I tried a *ngIf="" approach, but this causes a flickering carousel.

I also tried the ViewChild('carousel') approach and calling this.carousel.carouselService.refresh(); but this caused the slider to have slides that were very small.

Im using these options:

    this.customOptions = {
      autoWidth: false,
      autoHeight: false,
      loop: false,
      mouseDrag: true,
      touchDrag: true,
      pullDrag: true,
      dots: true,
      navSpeed: 700,
      navText: ['', ''],
      items: 1,
      responsiveRefreshRate: 500,
      nav: false
    };

<owl-carousel-o [options]="customOptions"
                (initialized)="setActiveId($event)"
                (changed)="setActiveId($event)"
                #carousel>
  <ng-container *ngFor="let notification of (notifications$ | async)">
    <ng-template carouselSlide
                 [id]="notification.id">
      <div class="p-5 notification-wrap m-auto d-flex">
        <my-card-notification class="w-100 d-block"
                                  [notification]="notification"
                                  [active]="notification.id === activeNotificationId">
        </my-card-notification>
      </div>
    </ng-template>
  </ng-container>
</owl-carousel-o>

https://ibb.co/17xVSBG

vitalii-andriiovskyi / ngx-owl-carousel-o

Angular resize issue #107