estoy usando Angular y quiero mostrar elementos de manera normal (usando owl-carousel-o), pero así es como se muestran en el enlace

ese es el código app.component.ts

 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"); }

este es el código HTML

 <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>

lo importé en app.module.ts

he intentado muchas soluciones en línea pero nada funciona

alguna solución ?