How to add Slick Slider in Magento 2?

Question

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?

Answer 1

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