title: How to let ngx-owl-carousel-o responsive setting working
body: <p>I fetch image data 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....</p>
  <p>This is my code. Can anyone tell me how to fix thisproblem?</p>
  <p>Html</p>
  <pre><code>&lt;owl-carousel-o [options]=&quot;carouselOptions&quot; #owlElement&gt;
    &lt;ng-container *ngFor=&quot;let picture of pictures&quot;&gt;
      &lt;ng-template carouselSlide [id]=&quot;picture.ScenicSpotID&quot;&gt;
        &lt;img [src]=&quot;picture.Picture.PictureUrl1&quot; [alt]=&quot;picture.Picture.PictureDescription1&quot; [title]=&quot;picture.ScenicSpotName&quot; /&gt;
      &lt;/ng-template&gt;
    &lt;/ng-container&gt;
  &lt;/owl-carousel-o&gt;
  </code></pre>
  <p>Component</p>
  <pre><code>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[]) =&gt; {
        this.pictures = res;
      })
    }
  }
  
  </code></pre>