Owl Carsouel in Magento2

I am creating owl carsouel for compare products

<div class="main-padding">
<div class="message-container"> </div>
<div class="compare-inner-block ">
        <div class="car-item-block owl-carousel owl-theme" id="avatar-carousel">
    </div>

    <div class="compare-btn">
            <div class="align-btn">
            <div class="button primary" id="compare-btn">
                <a href="<?php echo $this->getUrl("catalog/product_compare"); ?>" translate="yes" ><?php echo $helper->getBlockConfig("comparebuttontext"); ?> <span class="count" translate="yes"></span></a></div>
            <div class="button secondary" id="btn-secondry" translate="yes"><a  class="clearbtn" translate="yes"><?php echo $helper->getBlockConfig("clearbuttontext"); ?></a></div>
        </div>
    </div>
</div>

On Clicking on compare button i am sending an ajax call for getting product details and adding it in the carsouel ( Code given below ). Carasouel not showing items unless you once reload the page

$('#avatar-carousel').trigger('add.owl.carousel', ['<div class="item" id="'+productid+'"> <div class="car-image"> <img src ='+ProductData.image+' alt="Product Image"> </div> <div class="item-content"> <a class="title" href="'+ProductData.url+'">'+ProductData.name+'</a> <span class="price">'+ProductData.price+'</span> </div> <a class="btn-close" href="#"> <img src="<?php echo $this->getViewFileUrl('FME_AjaxCompare::icon/close.png') ?>" alt="close"> </a> </div>'])
            .trigger('refersh.owl.carousel');