Installing Slick
1.Add or download the latest version of the slick version
2.Unzip the downloaded folder and copy slick.min.js to
3.Create or edit require the js-config.js file in
4.Open require js-config.js and copy/paste this code:
5.Create a “vendor” folder in
Copy slick. less and slick-theme. less into it.
6.Clear cache and deploy files
7.Open frontend, view source code and find in <head> tag below code:
<script type=”text/javascript” src=”http://_YOURDOMAIN_/pub/static/_VERSION_/_requirejs/frontend/_YOUR_VENDOR_/_YOUR_THEME_/en_US/requirejs-config.js”></script>
Apply Slick to the product list widget
In the below steps, we will initialize Slick to the product list widget template file.
1.Create the “Magento_CatalogWidget” folder at the root of your theme and copy the below folder in it.
2.Open
app/design/frontend/_YOUR_VENDOR_/YOUR_THEME/Magento_CatalogWidget/templates/product/widget/content/grid.phtml
3.Initialise Slick Carousel before closing <?php endif; ?> with example code below
Create and insert product list widget in Homepage
1.Open Magento Admin → Content → Pages → Home Page
2.Content → Show/Hide Editor → Insert Widget → Widget Type(Catalog Products List) → Populate fields and choose Conditions (choose category you want or products for example)
3.Save widget & save the page
4.Check your Homepage and you should have a Slick carousel for the product list widget