'owl-carousel-o is showing item vertically

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 ?

Solution 1:^[1]

I believe you haven't imported owl styles. just do one of the followings

import them in src/styles.sass or src/styles.scsslike this:

   @import '~ngx-owl-carousel-o/lib/styles/scss/owl.carousel';
   @import '~ngx-owl-carousel-o/lib/styles/scss/owl.theme.default';

or add styles to angular.json:

"styles": [
    "node_modules/ngx-owl-carousel-o/lib/styles/prebuilt-themes/owl.carousel.min.css",
    "node_modules/ngx-owl-carousel-o/lib/styles/prebuilt-themes/owl.theme.default.min.css",
...
  ],

Solution 2:^[2]

angular.json has 2 "styles":[], I imported the owl styles on both and it worked

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	armin momeni
Solution 2	FDG

'owl-carousel-o is showing item vertically

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]