Owl carousel is showing only once - unable to see

问题:

I am using owl carousel plugin to show the images slider.

Here is the code

function imageSliderSettings() {
jQuery(".image-slider").each(function () {
    var id = jQuery(this).attr('id');
    var auto_value = window[id + '_auto'];
    var hover_pause = window[id + '_hover'];
    var speed_value = window[id + '_speed'];
    var items_value = window[id + '_items'];
    auto_value = (auto_value === 'true') ? true : false;
    hover_pause = (hover_pause === 'true') ? true : false;
    jQuery('#' + id).owlCarousel({
        loop: true,
        autoHeight: true,
        smartSpeed: 750,
        autoplay: auto_value,
        autoplayHoverPause: hover_pause,
        autoplayTimeout: speed_value,
        checkVisibility:true,
        responsiveClass: true,
        items : 1,
        responsive: {
            0: {
                items: 1
            },
            1024: {
                items: items_value,
            }
        }
    });
    jQuery(this).on('mouseleave', function () {
        jQuery(this).trigger('stop.owl.autoplay');
        jQuery(this).trigger('play.owl.autoplay', [auto_value]);
    })
});

}

I have list of images on click of each image i am showing owl carousel with diff set images. for the first image click, carousel is working but from the second time onward carousel is not showing.

When i debugged the code i got to know that owl plugin related classes are not adding the html elements

In working case code is like this

In Issue case, code is like this