I am adding the slides in owl carousel dynamically but it is not working fine when I try to remove them some of the properties of owl carousel won't work at all like margin, lazyload nav etc , although when I refresh the page it comes up the desired content but not working fine when I try to add / remove slide dynamically.

enter image description here

When I click on Cross Icon margin not working also nav is not showing unless i refresh the page I have tried owl.refresh etc but didn't work for me.

Any help, Thanks in advance.

Here is the code adding slides to the carousel on page load

owl = $('.car-item-block').owlCarousel({
    nav: true,
    items: 3,
    lazyLoad: true,
    singleItem: true

owl.trigger('add.owl.carousel', [jQuery('<div class="item" id="'+value['id']+'" > <div class="car-image"><img src='+value['image']+' alt="Product Image"></div> <div class="item-content"> <a class="title" href="'+value['url']+'">'+value['name']+'</a> <span class="price">'+value['price']+'</span>   </div> <a class="btn-close" href="#"> </a>  <img src="<?php echo $this->getViewFileUrl('FME_AjaxCompare::icon/close.png') ?>" alt="close"> </div>')]);
  • Please add your ajax code here.
    – Msquare
    Aug 4, 2022 at 11:01
  • @Msquare I have update the question Aug 4, 2022 at 11:39


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Browse other questions tagged or ask your own question.