Slick Slide After Scroll Slide is Working Magento2

Question

I have used Slick Slider for Product Comparison in Magento 2.3. The issue here is when I scroll alone the slick slider gets activated. But I need to load slider before.

Its Like I Am new to knockoutjs I dono whether my data passing method is correct or not. Please do guide me

PHTML Code

<div id="collapse" class="collapse prolist-compare-corosel">
    <div class="compare-arrow">
    </div>
    <div class="overslide" id="overslide">
        <section class="regular slider sliderfull slideleft slideshow" data-bind="foreach: compareProducts().items, afterAdd: initSlider">
        <div id="compare-items" class="product-items product-items-names">
            <div class="cardshape widthall removeslide">
                <input type="hidden" class="compare-item-id" data-bind="value: id"/>
                <a href="#" data-bind="attr: {'data-post': remove_url}" title="<?=/* @escapenotverified */ __('remove this item') ?>" class="action delete cancelclose remove-slide" > <span><?= /* @escapeNotVerified */ __('&times;') ?>
                </span>
                </a>
                <a href="" class="imagechange">
                <img data-bind="attr: {'src' : image_src}" alt="">
                </a>
                <div class="textwordcont">
                    <p class="model-name">
                        <a data-bind="attr: {href: product_url}, html: name" class="product-item-link productword"></a>
                    </p>
                    <p class="moneyd">
                        $3,499.99
                    </p>
                </div>
            </div>
        </div>
        </section>
        <section class="otherwid">
        <p class="comparecolor" id="block-compare-heading" role="heading" aria-level="2">
<?= /* @escapeNotVerified */ __('Compare') ?>
             (<span class="nocolor counter qty no-display" data-bind="text: compareProducts().countCaption, css: {'no-display': !compareProducts().count}"></span>)
        </p>
        <button type="button" class="clearall" id="clearall">
        <a id="compare-clear-all" href="#" class="action clear" data-post="<?=$block->escapeHtml( $this->helper('Magento\Catalog\Helper\Product\Compare')->getPostDataClearList() ) ?>"> <span><?= /* @escapeNotVerified */ __('CLEAR ALL') ?>
        </span>
        </a>
        </button>
        <a data-bind="attr: {'href': compareProducts().listUrl}" class="btn btn-colour-1 visible action compare primary"><span><?= /* @escapeNotVerified */ __('COMPARE') ?>
        </span></a>
        <!--<input type="button" class="btn btn-colour-1 visible" onclick="location.href='#';" value="COMPARE" />-->
        <!--<input type="button" class="btn btn-colour-1 visiblemob" onclick="location.href='#';" value="COMPARE (4)" />-->
        </section>
    </div>
</div>

My Js Code

require(['jquery', 'jquery/ui'], function($) {
    jQuery(document).on('ready', function() {
        $('.regular').not('.slick-initialized').slick({
            dots: true,
            infinite: true,
            slidesToShow: 3,
            slidesToScroll: 1,
            arrows: true,
            mobileFirst: true,
            responsive: [{
                breakpoint: 599,
                settings: {
                    slidesToShow: 2,
                    slidesToScroll: 0,
                    prevArrow: null,
                    nextArrow: null,
                    infinite: false
                },
                breakpoint: 999,
                settings: {
                    slidesToShow: 3,
                },
            }]
        });
    });
});

Before scroll slide:

After scroll slide:

Any help will be appreciated!