0

I have a added a product grid to magento 2 homepage. I need to slide the product using slick slider enter image description here

1
  • did you get a chance to look at my answer ? At least comment working Or Not! – Pawan Nov 1 '19 at 3:54
1

First you need to download Slick JS and CSS, You can download it from https://kenwheeler.github.io/slick/

Put Your CSS slick.css at:

app/design/frontend/{Package}/{theme}/Magento_Theme/web/css/

and JS slick.min.js at:

app/design/frontend/{Package}/{theme}/Magento_Theme/web/js/

Add Your CSS at:

app/design/frontend/{Package}/{theme}/Magento_Theme/layout/default_head_blocks.xml

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
  <head>
      <css src="Magento_Theme::css/slick.css" />
  </head>
</page>

Now you need to create a new file requirejs-config.js at:

app/design/frontend/{Package}/{theme}/requirejs-config.js

with following content:

var config = {
    map: {
        '*': {
            slick:'Magento_Theme/js/slick.min'
        }
    }
};

Now you can use slick JS anywhere by following code:

<script>// <![CDATA[
    require([
        'jquery',
        'slick'
    ], function ($, script) {
        $(document).ready(function() {
            $('.slick-class').slick({
              infinite: true,
              slidesToShow: 1,
              slidesToScroll: 1,
              autoplay: true
            });
        });
    });
    // ]]>
</script>

Note:

  1. You need to change class name
  2. Flush cache
  3. deploy content if in production mode

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.