owl-item width:0px

[giolongo]

Item's with tag p has width of 0px

[Superlukec]

I can confirm this behaviour.

To fix this, I need to trigger 'resize' event after first initialization. After that it works normally.

[dinopascale]

I can confirm this behaviour.

To fix this, I need to trigger 'resize' event after first initialization. After that it works normally.

Hi, maybe a noob question, but how do you retrigger 'resize' event after first initialization? I'm trying to resolve this issue for a while, but I have not found a right approach yet. Thank you

[giolongo]

I can confirm this behaviour. To fix this, I need to trigger 'resize' event after first initialization. After that it works normally.

I "solved" this with a littel workaround. On carouselSlide element I setted attribute [width]="number" and on customOptions I setted autoWidth attribute at true.

I don't kwnow if this is solution is correct, but in my personal case, I solved thanks of it.

[Superlukec]

You can trigger the 'resize' event like that:

window.dispatchEvent(new Event('resize'));

In my case I do it like:

setTimeout(() => { window.dispatchEvent(new Event('resize')); }, 500)

[vitalii-andriiovskyi]

@giolongo

The carousel always inherits the width of its parent DOM-element. If it has the width of 0 at the moment the carousel starts rendering, .owl-stage and .owl-item get the width of 0, Check the width of parent DOM-element at the moment the carousel starts rendering itself. Also this issue could be caused by your CSS

[harikrishnanng]

Hi @vitalii-andriiovskyi, I'm also facing this same issue. I have 2 carousels in separate components on the same page. One of them is a product slider and the other is a banner slider. The product slider works fine but the banner slider only shows when the 'resize' event occurs. For now, all the data is static. Even then this issue occurs.

"ngx-owl-carousel-o": "^4.0.0", "angular":"10.0.9"

[vitalii-andriiovskyi]

@harikrishnanng

find out the width of the DOM-element you put the banner slide in at the moment the carousel gets rendered. Check CSS of that element. display: flex could lead to this issue.

[harikrishnanng]

@vitalii-andriiovskyi Thanks mate. display: flex was the issue. In my case, the parent of the div containing the <owl-carousel-o> had that prop. It might help others if you could add this as a note in the readme.

[vivekdubey19]

@harikrishnanng

find out the width of the DOM-element you put the banner slide in at the moment the carousel gets rendered. Check CSS of that element. display: flex could lead to this issue.

This works for me and i think this was the reason. Thanks for the solution.

[SandeepBanerjee]

@harikrishnanng find out the width of the DOM-element you put the banner slide in at the moment the carousel gets rendered. Check CSS of that element. display: flex could lead to this issue.

This works for me and i think this was the reason. Thanks for the solution.

yes its workign for me as I have added that owl-corousal into a row class,