Magento2.3: Compare slider is not working

Question

We have customised the compare products as per our requirement. However, Its not working as expected. I'm not sure, whether the data binding is working or not.

For your information, I'm using slick slider for this.

Below is my code:

Script:

require([
        'jquery',
        'slick'
    ], function ($) {
        jQuery(document).ready(function () {

              jQuery(".regular").not('.slick-initialized').slick({
                dots: true,
                infinite: true,
                speed: 300,
                slidesToShow: 4,
                slidesToScroll: 4,
                responsive: [
                    {
                        breakpoint: 1280,
                        settings: {
                            slidesToShow: 3,
                            slidesToScroll: 3
                        }
                    },
                    {
                        breakpoint: 768,
                        settings: {
                            slidesToShow: 2,
                            slidesToScroll: 2
                        }
                    },
                    {
                        breakpoint: 600,
                        settings: {
                            slidesToShow: 1,
                            slidesToScroll: 1
                        }
                    }
                ]
            });
        });
    });

Template:

<div class="block block-compare" data-bind="scope: 'compareProducts'" data-role="compare-products-sidebar">

    <!-- ko if: compareProducts().count -->
    <div class="block-content no-display" aria-labelledby="block-compare-heading" data-bind="css: {'no-display': !compareProducts().count}">
<!-- compare product using html -->


   <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">
       <div class="cardshape widthall removeslide" >
                <input type="hidden" class="compare-item-id" data-bind="value: id"/>
                <div class="compareremove" 
                <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>
            </div>
            <div class="imagetext">
                <a href="" class="imagechange">
                <img data-bind="attr: {'src' : image_src}" alt="">
                </a>
            </div>
            <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>            
        </section> 
<!--    </div>
</div> -->




        <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>
        <a data-bind="attr: {'href': compareProducts().listUrl}" class="btn btn-colour-1 visiblemob action compare primary"><span><?= /* @escapeNotVerified */ __('COMPARE') ?>
        </span></a>

        </section>

</div>
</div>


<!-- End html -->
    </div>
    <!-- /ko -->

    <!-- ko ifnot: compareProducts().count -->
    <div class="empty"><?= /* @escapeNotVerified */ __('You have no items to compare.') ?></div>
    <!-- /ko -->
</div>

Could anyone please help me with this?