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 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>

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>'])

1 Answer 1


You need to append the field on click

 owl.append('<div class="item"> << image here >> </div>');

and use the owl carousel add method on load

 owl.trigger('add.owl.carousel', [jQuery('<div class="item"> <<image here>> </div>)]);

Your Answer

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.