In this article, we are going to understand how to include a 3rd party library and use it within the entire website.

Let’s take example of the Slick JS Library as an example:

Are you ready, lets get started:-

1. Add Js file:-

Download the library slick.min.js and copy slick.min.js to the <theme_path>/web/js folder

2. Add Css files:-

Copy slick.less and slick-theme.less to the <theme_path>/web/css/source folder. Also add both files to <theme_path>/web/css/source/_extend.less.

@import "slick.less";
@import "slick-theme.less";

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

4. Template File:-

We should now be able to use the Slick library, for example, on any list that we want to convert into a slider.

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

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

php bin/magento se:s:d -f

Conclusion

In this way, we are are successfully have slider the images. The 5 simple steps gives as the ability to add js libraries in Magento2. Do drop comment in the comment box. I would love to hear from you.