How to use Magento Carousel Plugin instead of Third Party Carousel
In this article, we will show you how to utilize the Slick carousel plugin in Magento instead of Third Party plugins like owl carousel, etc. Slick is a great and well-known plugin for presenting photos or product lists such as sale products, cross-sell products, upsell products, as well as other custom product lists.
Note: You can integrate it in Magento 2.4.3 and its upper versions only.
Now, let us create a banner slider step-by-step
Step1: First, create a custom module with all the Magento required files.
In our case Webkul_CustomSlickSlider
Step2: Now create a custom phtml file in the below path
app/code/Webkul/CustomSlickSlider/view/frontend/templates/customslickslider.phtml
<html>
<body>
<div class="slick-slider">
<div class="item"><img src="https://picsum.photos/200/300" /></div>
<div class="item"><img src="https://picsum.photos/200" /></div>
<div class="item"><img src="https://picsum.photos/id/237/200/300" /></div>
<div class="item"><img src="https://picsum.photos/seed/picsum/200/300" /></div>
<div class="item"><img src="https://picsum.photos/200/300?grayscale" /></div>
<div class="item"><img src="https://picsum.photos/200/300/?blur" /></div>
<div class="item"><img src="https://picsum.photos/200/300/?blur=2" /></div>
<div class="item"><img src="https://picsum.photos/id/870/200/300?grayscale&blur=2" /></div>
<div class="item"><img src="https://picsum.photos/id/870/200/300?grayscale&blur=2" /></div>
</div>
</body>
</html>
Step 3: Create a layout file in the
app/code/Webkul/CustomSlickSlider/view/frontend/layout
directory to set the customslickslider.js and customslickslider.phtml files in place. In our example, we have configured the slider in the default.xml file since we are showing it on the homepage. You must insert the following code in the page layout file if you wish to add the slider to any other page.
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<head>
<script src="Webkul_CustomSlickSlider::js/customslickslider.js" />
</head>
<body>
<referenceBlock name="content">
<block class="Magento\Framework\View\Element\Template" name="custom.slider" template="Webkul_CustomSlickSlider::customslickslider.phtml" />
</referenceBlock>
</body>
</page>
Step 4: Create the customslickslider.js file and add the following code in the app/code/Webkul/CustomSlickSlider/view/frontend/web/js directory.
require(['jquery', 'jquery/ui', 'slick'], function($) {
$(document).ready(function() {
$(".slick-slider").slick({
dots: true,
infinite: false,
slidesToShow: 4,
slidesToScroll: 1
});
});
});
Step 5: In the requireJS configuration file located at app/code/Webkul/CustomSlickSlider/view/frontend/requirejs-config.js, you must lastly include the customslickslider.js path.
var config = {
paths: {
slick: 'Webkul_CustomSlickSlider/js/customslickslider'
},
shim: {
slick: {
deps: ['jquery']
}
}
};
Result:
That’s all you need to do. I hope this helps.
Reference: Magento DevDocs JavaScript Resources
You can also check our other JS blogs: Webkul Javascript Blogs