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 .