Magento 2 - Owl Carousel

Question

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.

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,
    margin:10,
    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>')]);
owl.trigger('refresh.owl.carousel');