Magento 2 with Slick Carousel

Slick is a great Carousel plugin good for any product list like Most Popular, Featured, Upsell, Cross sell products, or any other custom product list. I will guide you with step by step on how to add Slick Carousel and apply it on product list widget on Homepage.

Lets get started!

Installing Slick

  1. Slick. Version in time of writing this tutorial is 1.6.0.
  2. Unzip downloaded folder and copy slick.min.js to
    app/design/frontend/_YOUR_VENDOR_/_YOUR_THEME_/web/js/
  3. Create or edit requirejs-config.js file in
    app/design/frontend/_YOUR_VENDOR_/_YOUR_THEME_/web/
  4. Open requirejs-config.js and copy/paste this code:
    var config = {
        paths: {
            slick:        'js/slick'
        },
        shim: {
            slick: {
                deps: ['jquery']
            }
        }
    };
  5. Create “vendor” folder in
    app/design/frontend/_YOUR_VENDOR_/_YOUR_THEME_/web/css/source/

    Copy slick.less and slick-theme.less into it.

  6. Clear cache and deploy files
  7. Open frontend, view source code and find in <head> tag below code
    <script type="text/javascript" src="http://_YOURDOMAIN_/pub/static/_VERSION_/_requirejs/frontend/_YOUR_VENDOR_/_YOUR_THEME_/en_US/requirejs-config.js"></script>

    In the bottom of the document you should see a code we added in step 4.

Apply Slick to product list widget

It below steps, we will initialise Slick to product list widget template file.

  1. Create “Magento_CatalogWidget” folder in the root of your theme and copy below folder in it.
    vendor/magento/module-catalog-widget/view/frontend/templates
  2. Open
    app/design/frontend/_YOUR_VENDOR_/YOUR_THEME/Magento_CatalogWidget/templates/product/widget/content/grid.phtml
  3. Initialise Slick Carousel before closing <?php endif; ?> with example code below
    <script>
        require([
            'jquery',
            'slick'
        ], function ($) {
            jQuery(document).ready(function () {
                jQuery(".widget-product-grid").slick({
                    dots: true,
                    infinite: true,
                    speed: 300,
                    slidesToShow: 4,
                    slidesToScroll: 4,
                    responsive: [
                        {
                            breakpoint: 1280,
                            settings: {
                                slidesToShow: 3,
                                slidesToScroll: 3
                            }
                        },
                        {
                            breakpoint: 768,
                            settings: {
                                slidesToShow: 2,
                                slidesToScroll: 2
                            }
                        },
                        {
                            breakpoint: 600,
                            settings: {
                                slidesToShow: 1,
                                slidesToScroll: 1
                            }
                        }
                    ]
                });
            });
        });
    </script>

Create and insert product list widget in Homepage

  1. Open Magento Admin → Content → Pages → Home Page
  2. Content → Show/Hide Editor → Insert Widget → Widget Type(Catalog Products List) → Populate fields and choose Conditions (choose category you want or products for example)
  3. Save widget & save page
  4. Check your Homepage and you should have Slick carousel for product list widget
  5. Last step is to customise Slicks CSS for your needs!

Thanks for reading!

Vanja Devcic

- Frontend Developer

Vanja is Certified Frontend Developer, designer in soul and in job, who likes to use his skills to change the world through digital experience creating responsive, multi-languages web sites

Read more posts by Vanja / Visit Vanja's profile

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <blockquote cite=""> <code> <del datetime=""> <em> <s> <strike> <strong>. You may use following syntax for source code: <pre><code>$current = "Inchoo";</code></pre>.