Reading list Switch to dark mode

    How to use Magento Carousel Plugin instead of Third Party Carousel

    Updated 7 March 2024

    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

    Start your headless eCommerce
    now.
    Find out More
    <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:

    Screenshot-from-2022-11-07-10-35-07

    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

    . . .

    Leave a Comment

    Your email address will not be published. Required fields are marked*


    Be the first to comment.

    Back to Top

    Message Sent!

    If you have more details or questions, you can reply to the received confirmation email.

    Back to Home