0

I have done the following to add slick slider autoplay in magento 2.. In my custom module requirejs-config.js

var config = {
    map: {
       '*': {
           slick: 'xxx_yyy/js/slick.min',
           slickSlider: 'xxx_yyy/js/slick-slider'
       }
   },
   shim: {
        slick: {
            deps: ['jquery']
        }
   },
};

My slick-slider.js for slider autoplay is

require([
    'jquery',
    'slick'
], function ($) {
    // $(document).ready(function () {
        $(".slider-gallery").slick({
            autoplay: true,
            dots: true,
            responsive: [{
                breakpoint: 500,
                settings: {
                    dots: false,
                    arrows: false,
                    infinite: false,
                    slidesToShow: 2,
                    slidesToScroll: 2
                }
            }]

        });
    // });
});

and i have initiated slick-slider.js in my template as

 <div class="slider" data-mage-init='{"slickSlider":{}}'>
            <div class="slide">
                <h1>slide 1</h1>
            </div>
            <div class="slide">
                <h1>slide 2</h1>
            </div>
            <div class="slide">
              <h1>slide 3</h1>
            </div>
            <div class="slide">
               <h1>slide 4</h1>
            </div>
            <div class="slide">
               <h1>slide 5</h1>
            </div>
</div>

but it is not working. Can anyone tell me how to add slick slider in magento 2?

1 Answer 1

2

You need to correct your step 2 make as below, Keep requirejs-config.js file in root of your theme instead of web folder.

Create requirejs-config.js file in

app/design/frontend/_YOUR_VENDOR_/_YOUR_THEME_/

with the following code in requirejs-config.js

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

Run

php bin/magento setup:upgrade

php bin/magento setup:static-content:deploy
6
  • Shouldn't add it in my custom module?
    – Pavithra
    Oct 5, 2018 at 7:21
  • Okay so u can check first view page source your slick slider javasscript call or not?
    – Rv Singh
    Oct 5, 2018 at 7:28
  • Ya i tried...But its not working.....
    – Pavithra
    Oct 5, 2018 at 7:29
  • Please check in your js
    – Rv Singh
    Oct 5, 2018 at 7:31
  • 1
    Maybe its because div class = slider but js is called on 'slider-gallery' ? Try making sure you are calling the js on the appropriate class.
    – Marina M
    Sep 11, 2020 at 12:33

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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