ngx-owl-carousel is not working in angular 6

问题

I have a simple angular 6 app and I have a added a simple ngx-owl-carousel , I have followed all steps as per instruction here is the link : https://www.npmjs.com/package/ngx-owl-carousel.

Here is my html :

<owl-carousel
[options]="{items: 4, dots: false, navigation: false}"
[items]="images"
[carouselClasses]="['owl-theme', 'row', 'sliding']">
<div class="item" *ngFor="let image of images;let i = index">
    <div class="thumbnail-image"></div>
  </div>
</owl-carousel>

here is component.ts array of immages

export class WhatwedoComponent {
  images = [
    '/assets/images/ico_1_dark.png',
    '/assets/images/ico_2_dark.png',
    '/assets/images/ico_3_dark.png',
    '/assets/images/ico_4_dark.png',
  ];

}

Unfortunately the carousel is not displayed at all in my app; in console browser no errors.

what is wrong with my codes ?, any help will be apreciated .

回答1:

I'm able to use ngx-owl-carousel just fine in Angular 6 apps, so the issue is not with the version of Angular you are using. I suggest you keep digging! Good luck.

回答2:

You're missing the img element.

<img [src]="image"/>

Make the following adjustment.

<owl-carousel
[options]="{items: 4, dots: false, navigation: false}"
[items]="images"
[carouselClasses]="['owl-theme', 'row', 'sliding']">
<div class="item" *ngFor="let image of images;let i = index">
    <div class="thumbnail-image">
       <img [src]="image"/>
     </div>
  </div>
</owl-carousel>

来源：https://stackoverflow.com/questions/51930994/ngx-owl-carousel-is-not-working-in-angular-6