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

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
  • Shouldn't add it in my custom module? – Magento User 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..... – Magento User Oct 5 '18 at 7:29
  • Please check in your js – Rv Singh Oct 5 '18 at 7:31
  • checked page source. My js is getting called. slick classes are getting added to div in template.. But autoplay slider is not working... – Magento User Oct 5 '18 at 7:32

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.