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?

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 '18 at 7:21
  • Okay so u can check first view page source your slick slider javasscript call or not?
    – Rv Singh
    Oct 5 '18 at 7:28
  • Ya i tried...But its not working.....
    – Pavithra
    Oct 5 '18 at 7:29
  • Please check in your js
    – Rv Singh
    Oct 5 '18 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 '20 at 12:33

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.