Angular18 : ngx-owl-carousel-o does not rendering correctly

I am using ngx-owl-carousel-o version 18 with Angular18. I am trying to use 2 owl-carousel into single row. But it does not rendering as expected. Owl corousel displaying only one item. Owl-carousel issue

Here is my code sample:

Parentcomponent.html :

<div class="row">
<div class="col-md-6 suppliers-part separator">
<app-sellers [datacount]=9 />
</div>
<div class="col-md-6 buyers-part">
<app-buyers [datacount]=9 />
</div>
</div>


sellerscomponent.html:

<owl-carousel-o [options]="customOptions">
<ng-template carouselSlide *ngFor="let seller of sellers" [id]="seller.id">
<div class="product-item bg-light">
<div class="product-img">
<div class="sp-onimg">
<div class="favorite">
<a href="javascript:void(0)">
<p>
<i class="fa fa-heart" title="Add to my favorite list"></i>
</p>
</a>
</div>
<div class="favorite">
<a title="Add to my contacts" href="javascript:void(0)">
<p><i class="fa fa-user-plus"></i></p>
</a>
</div>
</div>
<img class="img-fluid" src="img/supplier4.png" alt="">
</div>
<div class="slider-detail">
<p>{{ seller.name }}</p>
<div class="d-flex mt-2">
<a href="" class="login"><i class="fa fa-lock"></i> Login to View</a>
<p class="india" style="margin-left: auto;"><img src="img/india2.png"></p>
</div>
</div>
</div>
</ng-template>
</owl-carousel-o>


sellerscomponent.ts code for owl corousel:

import { Component, Input } from '@angular/core';
import { UserService } from '../user.service';
import { CommonModule } from '@angular/common';
import { CarouselModule } from 'ngx-owl-carousel-o';
import { OwlOptions } from 'ngx-owl-carousel-o';

@Component({
selector: 'app-sellers',
standalone: true,
imports: [CommonModule, CarouselModule],
templateUrl: './sellers.component.html',
styleUrl: './sellers.component.css'
})
export class SellersComponent {
constructor(private userService: UserService) { }
@Input() datacount: any = 0;
sellers: any;
customOptions: OwlOptions = {
loop: true,
margin: 10,
autoplay: false,
smartSpeed: 1000,
navText: ['<', '>'],
nav: true,
responsive: {
0: {
items: 1
},
400: {
items: 1
},
740: {
items: 3
},
940: {
items: 3
},
}
}

ngOnInit(): void {
this.userService.getseller(this.datacount).subscribe((response: any) => {
if (response.status == 'success') {
this.sellers = response.data;
}
// console.log(this.sellers);
}, error => {
console.log(error);
});

}
}



I created same code for buyerscomponent. It supposed to display 3 Items at the slider area. But it does not working as expected.

Continue reading...