How to add Slick slider in Magento 2 Custom theme

Follow these easy step for adding Slick slider in Magento 2 Custom theme

1.) Download the Slick library

2.) Include css files in theme .copy slick.less and slick-theme.less to the /web/css/source folder. Also add both files to /web/css/source/_extend.less.

@import "slick.less";

@import "slick-theme.less";

3.) update the theme’s requirejs-config.js file.

theme_path/requirejs-config.js

var config = {
 paths: {
     slick: 'js/slick.min'
 },
 shim: {
     slick: {
         deps: ['jquery']
     }
   }
};

4.) After these steps, clear the cache and perform a static content deployment.

Now you can use the slider in any phtml file by initializing the slider

<ul class="my-product-slider">
    <li>1st Product</li>
    <li>2nd Product</li>
    <li>3rd Product</li>
    <li>4th Product</li>
    <li>5th Product</li>
    <li>6th Product</li>
    <li>7th Product</li>
    <li>8th Product</li>
</ul>

<script>
   require([
      'jquery',
      'slick',
      'domReady!'
   ], function ($) {
      $(".my-product-slider").slick({
         dots: true,
         infinite: true,
         speed: 300,
         slidesToShow: 4,
         slidesToScroll: 1
      });
   });
</script>

Please contact us for Magento 2 theme customizations and Magento 2 frontend development Contact .