How to Add Slick Slider in Magento 2

In this tutorial, Today I will explain to how to add slick slider in Magento 2. Slick slider is one of the good carousel slider plugin to product list. You can set it in your most viewed product slider, new product slider, featured product slider etc.

So, Let’s see that how to add slick slider in Magento 2

You may also like this :

1) Let’s assume that you have created simple module. Now, you have to add this below code in app/code/RH/SlickSlider/view/frontend/templates/slider.phtml file

Copy Code


<!--
/**
 * Created By : Rohan Hapani
 */
-->
<!DOCTYPE html>
<html>
<body>
    <section class="regular slider">
        <div>
            <img src="http://placehold.it/350x300?text=1" />
        </div>
        <div>
            <img src="http://placehold.it/350x300?text=2" />
        </div>
        <div>
            <img src="http://placehold.it/350x300?text=3" />
        </div>
        <div>
            <img src="http://placehold.it/350x300?text=4" />
        </div>
        <div>
            <img src="http://placehold.it/350x300?text=5" />
        </div>
        <div>
            <img src="http://placehold.it/350x300?text=6" />
        </div>
    </section>
</body>
</html>

2) After that, you need to slick js code in app/code/RH/SlickSlider/view/frontend/web/js/common.js file.

Copy Code


/**
 * Created By : Rohan Hapani
 */
require(['jquery', 'jquery/ui', 'slick'], function($) {
    $(document).ready(function() {
        $(".regular").slick({
            dots: true,
            infinite: true,
            slidesToShow: 3,
            slidesToScroll: 3
        });
    });
});

3) Then, you need to call common.js file and slider.phtml in app/code/RH/SlickSlider/view/frontend/slickslider_index_index.xml custom layout file :

Copy Code


<?xml version="1.0"?>
<!--
/**
 * Created By : Rohan Hapani
 */
-->
<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="RH_SlickSlider::js/common.js" async="async" />
    </head>
    <body>
        <referenceBlock name="content">
            <block class="Magento\Framework\View\Element\Template"
                name="rh-slick-slider"
                template="RH_SlickSlider::slider.phtml" />
        </referenceBlock>
    </body>
</page>

4) In Last, You need to add slick slider in your app/code/RH/SlickSlider/view/frontend/requirejs-config.js file and paste this below code :

Copy Code


/**
 * Created By : Rohan Hapani
 */
var config = {
    paths: {
        slick: 'RH_SlickSlider/js/slick'
    },
    shim: {
        slick: {
            deps: ['jquery']
        }
    }
};

You need to add css and js file in your module’s web folder. You can use this code in your any phtml file or any layout where you want to call this slider.

That’s it !!!

You can check full module here : Click Here

I hope this blog is easy to understand how to add slick slider in Magento 2.In case, I missed anything or need to add some information, always feel free to leave a comment in this blog, I’ll get back with a proper solution.

Stay Safe and Stay Connected !!

Post Views: 17,598