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

This site is temporarily in read-only mode and not accepting new answers.

Not the answer you're looking for? Browse other questions tagged .