vitalii-andriiovskyi / ngx-owl-carousel-o

owl-carousel for Angular >=6
MIT License
178 stars 51 forks source link

Doesn't load slides corrctly #146

Open mantox74 opened 3 years ago

mantox74 commented 3 years ago

It doesn't works!

Schermata 2021-04-29 alle 16 12 29

This is my component HTML `<owl-carousel-o [options]="customOptions" ngIf="storeProductsList"> <ng-container ngFor="let product of storeProductsList; let i = index"> <ng-template carouselSlide [id]="product.id">

{{ product.factory }}

{{ product.name }}

  <img [src]="product.url_img" class="products__img" width="200" (error)="errorImg($event)" />
  <a *ngIf="product.url_detail" href="{{ product.url_detail }}" target="_blank" class="btn btn-light product-infos__btn">More info</a>
</ng-template>

`

and this is my array (the path are ok but i change it because are path of my dealer): [{ "id": "FF_02", "url_img": "https://example/dw/image/v2/AAWR_PRD/on/demandware.static/-/Sites-vbi-apparel-footwear/default/dw15528d32/images/M07/KSO%20EVO2017%20Black%20Red/18M0701_MAIN.jpg?sh=1000", "url_detail": "https://example/en/shop/....M07.html?dwvar_M07_color=Black%20%2F%20Red#start=1", "factory": "factory", "name": "name 1" },{ "id": "FF_01", "url_img": "https://example.com/dw/image/v2/AAWR_PRD/on/demandware.static/-/Sites-vbi-apparel-footwear/default/dwfbbced1b/images/W07/KSO%20EVO%202017%20Black%20Rose/18W0701_MAIN.jpg?sh=1000", "url_detail": "https://example/en/shop/..../W07.html?dwvar_W07_color=Black%20%2F%20Rose#start=1", "factory": "factory", "name": "name 2" }] I hope some soggestions

neehad commented 3 years ago

I had a similar problem. I’m not sure why he showed up suddenly. To solve it, I used the margin option. Eg. margin: 250, in my case.

vitalii-andriiovskyi commented 3 years ago

Hi @mantox74

It seems there's something wrong with your css-styles. I copy your code and it shows good. There were cases where display: flex was the culprit.