On this article, we’ll present you the way to make the most of the Slick carousel plugin in Magento as an alternative of Third Celebration plugins like owl carousel, and so forth. Slick is a superb and well-known plugin for presenting pictures or product lists equivalent to sale merchandise, cross-sell merchandise, upsell merchandise, in addition to different customized product lists.
Be aware: You may combine it in Magento 2.4.3 and its higher variations solely.
Now, allow us to create a banner slider step-by-step
Step1: First, create a customized module with all of the Magento required information.
In our case Webkul_CustomSlickSlider
Step2: Now create a customized phtml file within the under path
app/code/Webkul/CustomSlickSlider/view/frontend/templates/customslickslider.phtml
<html>
<physique>
<div class="slick-slider">
<div class="merchandise"><img src="https://picsum.pictures/200/300" /></div>
<div class="merchandise"><img src="https://picsum.pictures/200" /></div>
<div class="merchandise"><img src="https://picsum.pictures/id/237/200/300" /></div>
<div class="merchandise"><img src="https://picsum.pictures/seed/picsum/200/300" /></div>
<div class="merchandise"><img src="https://picsum.pictures/200/300?grayscale" /></div>
<div class="merchandise"><img src="https://picsum.pictures/200/300/?blur" /></div>
<div class="merchandise"><img src="https://picsum.pictures/200/300/?blur=2" /></div>
<div class="merchandise"><img src="https://picsum.pictures/id/870/200/300?grayscale&blur=2" /></div>
<div class="merchandise"><img src="https://picsum.pictures/id/870/200/300?grayscale&blur=2" /></div>
</div>
</physique>
</html>
Step 3: Create a structure file within the
app/code/Webkul/CustomSlickSlider/view/frontend/structure
listing to set the customslickslider.js and customslickslider.phtml information in place. In our instance, we’ve configured the slider within the default.xml file since we’re displaying it on the homepage. You will need to insert the next code within the web page structure file in case you want to add the slider to another web page.
<?xml model="1.0"?>
<web page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" structure="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Format/and so forth/page_configuration.xsd">
<head>
<script src="Webkul_CustomSlickSlider::js/customslickslider.js" />
</head>
<physique>
<referenceBlock identify="content material">
<block class="MagentoFrameworkViewElementTemplate" identify="customized.slider" template="Webkul_CustomSlickSlider::customslickslider.phtml" />
</referenceBlock>
</physique>
</web page>
Step 4: Create the customslickslider.js file and add the next code within the app/code/Webkul/CustomSlickSlider/view/frontend/internet/js listing.
require(['jquery', 'jquery/ui', 'slick'], operate($) {
$(doc).prepared(operate() {
$(".slick-slider").slick({
dots: true,
infinite: false,
slidesToShow: 4,
slidesToScroll: 1
});
});
});
Step 5: Within the requireJS configuration file positioned at app/code/Webkul/CustomSlickSlider/view/frontend/requirejs-config.js, you need to lastly embody the customslickslider.js path.
var config = {
paths: {
slick: 'Webkul_CustomSlickSlider/js/customslickslider'
},
shim: {
slick: {
deps: ['jquery']
}
}
};
Outcome:
That’s all you could do. I hope this helps.
Reference: https://developer.adobe.com/commerce/frontend-core/javascript/sources/
You too can examine our different js blogs: https://webkul.com/weblog/class/javascript/
