1

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:

enter image description here

After scroll slide:

enter image description here

Any help will be appreciated!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.