How to use magento carousel plugin instead of third party carousel

In this article, we will show you how to use the Sleek Carousel plugin in Magento instead of third party plugins like Owl Carousel, etc. Sleek is a great and well-known plugin for cross-presenting sales products, such as photos or product lists. Sell ​​products, upsell products, as well as other custom product listings.

Note: You can integrate this only in Magento 2.4.3 and its upper versions.

Now, let’s make the 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
app/code/webcool/customSlickSlider/views/frontend/layouts
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 as we are showing it on the homepage. If you want to add the slider to another page, you need to insert the following code in the page layout file.

<?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 customslickslider.js file and add following code in app/code/webcool/customslickslider/views/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/webkull/customslickslider/views/frontend/requirejs-config.js, you need to include the customslickslider.js path at the end.

var config = {
    paths: {
        slick: 'Webkul_CustomSlickSlider/js/customslickslider'
    },
    shim: {
        slick: {
            deps: ['jquery']
        }
    }
};

Result:

That’s all you have to do. Hope this will help you.

Reference: https://developer.adobe.com/commerce/frontend-core/javascript/resources/

You can also visit our other JS blog: https://webkul.com/blog/category/javascript/

Leave a Comment