2

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:

enter image description here

Any help will be appreciated!

1

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

|improve this answer|||||

Your Answer

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.