Magento – Slick slider is not working properly in Magento2.3

comparejquerymagento2.3phtmlslider

I would like to use slick slider concept for compare products so I have implemented it on my Magento site. But It's not working as expected though the script has been loaded. I'm not sure where am I wrong.

I have included the code as well as the screenshot of my output for better understanding.

Code in template file:

    <div id="collapse" class="collapse prolist-compare-corosel">
    <div class="compare-arrow"></div>
    <div class="overslide" id="overslide">

        <section class="regular sliderfull slideleft slideshow">
            <ul id="compare-items" class="product-items product-items-names bxfrcmp" data-bind="foreach: compareProducts().items, afterAdd: initSlider">
                <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>

            </ul>

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

Code in Script:

jQuery(document).ready(function($){
         require(['jquery', 'jquery/ui'], jQuery(window).scroll(function(jQuery){

             jQuery('.slideshow').slick({
                dots: true,
    infinite: false,
    slidesToShow: 3,
    slidesToScroll: 1,
    arrow:false,
    dots: false,
    collapsible: true,
    mobileFirst: true,
    responsive: [
    {

    breakpoint: 599,
    settings: {
    slidesToShow: 2,
    slidesToScroll: 0,
    prevArrow: null,
    nextArrow: null,
    infinite : false

    },
    breakpoint: 999,
    settings: {
    slidesToShow: 3,


    },
    }
    ]
              });


    }));
       });

Css File

 .slick-active {
    opacity: 1.5 !important;
    }

    .slick-slide {
    margin: 0px 20px;
    }
    .slick-slide img {
    width: 100%;
    }
    .slick-prev:before,
    .slick-next:before {
    color: black;
    }
    .slick-slide {
    transition: all ease-in-out .3s;
    opacity: .2;
    }

    .slick-active {
    opacity: .5;
    }
    .slick-current {
    opacity: 1;
    }
    .cardshape {
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    transition: 0.3s;
    width: 180% !important;
    height:127px;

    }
    .cardshape:hover {
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
    }
    .textwordcont {
    font-size: 15px;
    top: -144px;
    position: relative;
    padding-left: 178px;
    font-weight: 500;
    word-spacing: 0.17em;
    line-height: 1.3;
    cursor:pointer;

    }
    .containers {
    font-size: 15px;
    top: 41px;
    position: relative;
    padding-left: 175px;
    font-weight: 500;
    word-spacing: 0.17em;
    line-height: 1.3;
    cursor:pointer;

    }
    .sizeimage{
    width:27%;
    position:relative;
    bottom:46px;
    }
    .productword{
    text-decoration:none;
    color: #333;
    }

    .moneyd{
    font-weight:bold;
    font-size:18px;
    cursor:auto;
    }
    .cancelclose{
    font-size:xx-large;
    margin-left:334px;
    position: relative;
    top: -4px;
    cursor:pointer;
    }
    .productword:hover{
    text-decoration: underline;
    }
    .slideleft{
    margin-left: 15px;
    }
    .slick-slide img {
    width: 33% !important;
    padding-left: 52px;
    }
    .widthall{
    width: 357px !important;
    margin-left:-17px;
    }
    .sliderfull{
    width:85% !important;
    margin: 45px !important;
    }
    .overslide{
    width: 100%;
    border-top-color: #ffffff;
    border-top-style: inset;
    display: flex;
    border-top-width: thin;

    }
    .slick-next:before {

    /* background-image:url(carousel-right-over.svg)!important; */
    color: black !important;

    }
    .slick-next {
    right: -11px !important;
    margin-top: -54px;
    font-size: 30px !important;
    }
    .slick-prev {
    left: -22px!important;
    margin-top: -55px !important;
    font-size: 30px;
    }
    .otherwid{
    width:15% !important;
    }
    .comparecolor{
    color: #6b6b6b !important;
    font-weight:bold;
    padding-top: 27px;
    font-size: 18px;
    margin-left: -6px;
    }
    .nocolor{
    color: #a50034 ;
    }
    .clearall{
    font-family: inherit;
    font-size: 13px;
    margin: 0;
    border: 0;
    background-color: unset;
    font-weight: 540;
    color: #6b6b6b;
    text-decoration: underline;
    margin-left: 10px;
    margin-top: 40px;
    cursor:pointer;
    }
    .btn-colour-1 {
    color: #fff;
    background-color: #cc0041 !important;
    border-color: #cc0041!important;
    font-weight: bold;
    letter-spacing: 0.05em;
    border-radius: 0;
    line-height:2;
    border: 1px solid transparent;
    width:111%;
    margin-left:-21px;
    margin-top:28px;
    border-radius:3px;
    height: 38px;

    }
    .btn-colour-1:hover,
    .btn-colour-1:active,
    .btn-colour-1:focus,
    .btn-colour-1.active {
    background: #cc004 !important;
    color: #ffffff;
    border-color: #cc0041 !important;
    }
    .compare-arrow{
    background-image:url(compare-component-close.png);
    background-repeat: no-repeat;
    padding: 10.5px;
    margin-left: 598px;
    cursor:pointer;
    }
    .ico-compare{
    text-decoration:none !important;
    }
    .plus{
    background-image: url("compare.svg");
    padding-left: 23px;
    background-repeat:no-repeat;
    color:#6b6b6b;
    background-position: 34px;
    }
    .plus.minus{
    background-image: url("compare-added.svg");
    color: #6b6b6b;
    background-repeat:no-repeat;
    }
    .fa, .fas {
    opacity: 0.30;
    }

    .cont {
    padding: 2px 16px;
    }
    .modelcolor{
    color:black;
    text-decoration:none;
    }
    .visiblemob{
    visibility: hidden;
    }
    .prolist-compare-corosel {
    position: fixed;
    width: 100%;
    left: 0;
    bottom: -133px;
    z-index: 1001;
    background: #fff;
    padding: 0;
    /* border-top: 1px solid #bdbdbd; */

    }
.borderempty{
    border: 1px dashed #ddd;
}

Screenshot:

Any help will be appreciated!

Best Answer

Here, I'm providing you few steps. How you can implement slick slider in your Magento..

For more information you can check this module.. Download Full Module

I've created Sample Demo with Slick Slider that will help you to implement that in your Magento 2.

Step - 1 - Create `requirejs-config.js` file

Create requirejs-config.js this file here in module..

app/code/Vendor/Module/view/frontend/requirejs-config.js

Content for this file is ..

var config = {
    paths: {
        slick: 'Vendor_Module/js/slick'
    },
    shim: {
        slick: {
            deps: ['jquery']
        }
    }
};

Step - 2 - Add `slick.js` and `slick.min.js` files

You can download latest version of slick here

Download that and extract .zip file and copy slick.js and slick.min.js files from there and paste that here..

app/code/Vendor/Module/view/frontend/web/js/slick.js

and

app/code/Vendor/Module/view/frontend/web/js/slick.min.js

Step - 3 - Now add `slick.less` and `slick-theme.less` files

Copy .less files from downloaded directory to below mentioned path..

app/code/Vendor/Module/view/frontend/web/css/source/slick.less

and

app/code/Vendor/Module/view/frontend/web/css/source/slick-theme.less

Step - 4 - create `_module.less` file

Now create _module.less file here..

app/code/Vendor/Module/view/frontend/web/css/source/_module.less

This is important file to run slick slider properly in Magento 2 without any issues.

Content for this file is..

@import 'slick.less';
@import 'slick-theme.less';

Step - 5 - Run following commands

We need to run following commands to check output properly

php bin/magento setup:upgrade
php bin/magento cache:clean
php bin/magento cache:flush
php bin/magento setup:static-content:deploy -f

Please do not forget to run this command here..

php bin/magento setup:static-content:deploy -f

That's it. Now you can use slick slider in your template files like this..

<section class="regular slider">
    <div>
        <img src="http://placehold.it/350x300?text=1">
        </img>
    </div>
    <div>
        <img src="http://placehold.it/350x300?text=2">
        </img>
    </div>
    <div>
        <img src="http://placehold.it/350x300?text=3">
        </img>
    </div>
    <div>
        <img src="http://placehold.it/350x300?text=4">
        </img>
    </div>
    <div>
        <img src="http://placehold.it/350x300?text=5">
        </img>
    </div>
    <div>
        <img src="http://placehold.it/350x300?text=6">
        </img>
    </div>
</section>

<script type="text/javascript">
    require(['jquery', 'jquery/ui', 'slick'], function($) {
        $(document).ready(function() {
            $(".regular").slick({
                dots: true,
                infinite: true,
                slidesToShow: 3,
                slidesToScroll: 3
            });
        });
    });
</script>

Hope this will helpful to you!!

Best Answer

Step - 1 - Create requirejs-config.js file

Step - 2 - Add slick.js and slick.min.js files

Step - 3 - Now add slick.less and slick-theme.less files

Step - 4 - create _module.less file

Step - 5 - Run following commands

Related Solutions

Featured Product Slider Not Working Properly

Magento 2 Slick Slider – Slick Slider Function Not Working

Related Topic

Step - 1 - Create `requirejs-config.js` file

Step - 2 - Add `slick.js` and `slick.min.js` files

Step - 3 - Now add `slick.less` and `slick-theme.less` files

Step - 4 - create `_module.less` file