response is not working

[hansonho]

I fetch image from api. After get the image array, I want to show it. The first time is correct, but when I change my window size, response is not working....

This is my code.

html

<owl-carousel-o [options]="carouselOptions" #owlElement>
  <ng-container *ngFor="let picture of pictures">
    <ng-template carouselSlide [id]="picture.ScenicSpotID">
      <img [src]="picture.Picture.PictureUrl1" [alt]="picture.Picture.PictureDescription1" [title]="picture.ScenicSpotName" />
    </ng-template>
  </ng-container>
</owl-carousel-o>

component

export class KvBannerComponent implements OnInit {

  constructor(
    private service: KvBannerService,
  ) { }

  pictures: TourismPictures[] = [];

  carouselOptions: OwlOptions = {
    autoplay: true,
    loop: true,
    mouseDrag: false,
    touchDrag: false,
    pullDrag: false,
    dots: false,
    navSpeed: 700,
    navText: ['', ''],
    responsive: {
      0: {
        items: 1 
      },
      768: {
        items: 2 
      },
      1024: {
        items: 3 
      },
      1200: {
        items: 4
      },
    },
    nav: true
  }

  ngOnInit(): void {
    this.getBannerPictures();
  }

  getBannerPictures(): void {
    this.service.getTourismPictures().subscribe((res: TourismPictures[]) => {
      this.pictures = res;
    })
  }
}

[vitalii-andriiovskyi]

Hi, @hansonho

The option responsive works. But take into account the numbers 0, 768, 1024, 1200 are not window width. They are the width of the parent DOM element containing your <owl-carousel-o [options]="carouselOptions" #owlElement>