How to add Slick slider in Magento 2 Custom theme
- March 5, 2023
No Comments
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 .
About us and this blog
We are a digital magento 2 development agency with a focus on helping our customers achieve great results across several key areas.
More From Our Blogs
See all posts
Magento 2 On Localhost , In this tutorials i am going to show you how to…
Magento 2.4.6 will be released in March 2023 and will support PHP8.2 , PHP 8.1 but…
To create Controller in Magento 2 we need to create basic module with router file routes.xml…
For creating multiple stores in Magento 2 you have to follow few steps:- Multiple Stores In…
Magento 2 admin theme allows the admin to have a customized backend panel with custom logo,…
Magento 2 is a module based e commerce system . and you can make custom feature…
No Comments
Recent Posts
- How to setup virtual host on XAMPP for Magento 2 local development March 13, 2023
- What’s New In Magento 2.4.6 ? Features, Enhancements . March 9, 2023
- How to Create Controller in Magento 2 March 5, 2023
All Website Tags
custom module
Magento2
Magento 2 custom block
Magento 2 custom controller
Magento 2 custom layout
Magento 2 custom module
Magento 2 custom module development
Magento 2 custom template
Magento 2.4.6
Magento 2.4.6 developer in United Kingdom
Magento 2.4.6 development in United Kingdom
Magento 2.4.6 update services in United Kingdom
Magento 2.4.6 version upgrade services in United Kingdom
Magento security
PHP8.2
product slider
slick
slider
Upgrade to PHP8.2