i'm using Angular and i want to show items in normal way (using owl-carousel-o) , but that's how they're shown in the Link

that's the app.component.ts code

    import { Component,OnInit, HostListener } from '@angular/core';
import { OwlOptions } from 'ngx-owl-carousel-o';
import { MatCarousel, MatCarouselComponent } from '@ngmodule/material-carousel';
import {MatBottomSheet, MatBottomSheetRef} from '@angular/material/bottom-sheet';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'projet';

  
  slides = [
    {'image': 'https://picsum.photos/seed/picsum/1200/300'}, 
    {'image': 'https://picsum.photos/seed/picsum/1200/300'},
    {'image': 'https://picsum.photos/seed/picsum/1200/300'}, 
    {'image': 'https://picsum.photos/seed/picsum/1200/300'}, 
    {'image': 'https://picsum.photos/seed/picsum/1200/300'}
  ];
// Product Slider
customOptions: any = {
    loop: false,
    dots: false,
    navSpeed: 300,
    responsive: {
        991: {
            items: 4
        },
        767: {
            items: 3
        },
        420: {
            items: 2
        }, 
        0: {
            items: 1
        }
    }
}
      slidesStore = [

      {id: "1", img: "https://dummyimage.com/350x150/423b42/fff"},

      {id: "2", img: "https://dummyimage.com/350x150/2a2b7a/fff"},

      {id: "3", img: "https://dummyimage.com/350x150/1a2b7a/fff"},

      {id: "4", img: "https://dummyimage.com/350x150/7a2b7a/fff"},


    ];
// <HTMLInputElement>document.getElementById("navbar");

}

this is HTML code

<owl-carousel-o [options]="customOptions">

    <ng-container *ngFor="let slide of slidesStore">
      <ng-template carouselSlide [id]="slide.id">
        <img [src]="slide.img" >
      </ng-template>
    </ng-container>

  </owl-carousel-o>

i did import it in app.module.ts

i've tried many solutions online but nothing works

any solution ?