Magento 2 with Slick Carousel

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!

Related Inchoo Services

You made it all the way down here so you must have enjoyed this post! You may also like:

Moving the validation error message, this time globally Danijel Vrgoc
, | 0

Moving the validation error message, this time globally

Behind the scenes with one Magento PWA Studio contributor Aron Stanic
Aron Stanic, | 3

Behind the scenes with one Magento PWA Studio contributor

Customising product info tabs in Magento 2 (part 2) Igor Tikvic
, | 2

Customising product info tabs in Magento 2 (part 2)

13 comments

  1. Hi,

    Great article, I appreciate this implementation as an example. I am adding the slider to CMS pages only so am using layout update xml. I am curious on your implementation on performance of non-product pages, and or why you didn’t include it in the theme layout update for product pages?

    Thanks,
    Dave

  2. slick.less and slick-theme.less files are not working. css classes are not coming into at frontend.

  3. Hi,
    could you help me, i’m not able to use the plugin…

    I did :

    - JS files :
    app/design/frontend/Ponant/theme1/Magento_CatalogWidget/web/js/slick.min.js
    app/design/frontend/Ponant/theme1/Magento_CatalogWidget/requirejs-config.js
    (i tried to put in app/design/frontend/Ponant/theme1/web/js/slick.min.js & app/design/frontend/Ponant/theme1/web/requirejs-config.js too, but no change)

    - PHTML file :
    app/design/frontend/Ponant/theme1/Magento_CatalogWidget/templates/product/widget/content/grid.phtml
    The script is just before the last (i tried to put before the first too)

    - LESS files :
    app/design/frontend/Ponant/theme1/Magento_CatalogWidget/web/css/source/slick-theme.less
    app/design/frontend/Ponant/theme1/Magento_CatalogWidget/web/css/source/slick.less
    app/design/frontend/Ponant/theme1/Magento_CatalogWidget/web/css/source/_extend.less with @import "slick-theme.less" & @import "slick.less"
    (i tried to put in app/design/frontend/Ponant/theme1/web/css/source/slick-theme.less
    app/design/frontend/Ponant/theme1/web/css/source/slick.less too, but no change)

    Thanks for your help

  4. It is necessary to use like…
    jQuery(“.widget-product-grid”).not(‘.slick-initialized’).slick(

    instead of…
    jQuery(“.widget-product-grid”).slick(

    because if multiple product list widgets will be there in same page (like home page), then it may give JS error.

  5. I quote the Géraud suggestion, the requirejs-config.js file works better in the root folder.
    I’ve used this for integrate owl carousel 🙂

    Thankyou 🙂

  6. Hi Inchoo Team,

    First of all Thanks for sharing wonderful slider.
    I implement it in my store. But some how it will take time to load the slider, I can not find out how to solve this issue.

    Can you please let me how I can solve it.

    Thanks

  7. Hi,

    I’ve followed the steps carefully but my products list is not becoming “slick”…. are these instructions compatible with Magento 2.2?

    Thanks

  8. Thanks for sharing this. Can you please guide how can we use Slick Slider to build a slider to display “Similar Products from the same collection/category” like on this website: https://www.lulifama.com/viva-cuba-crystallized-wavey-triangle-top-viva-cuba-full-ruched-back-bottom.html

    This website is also using Slick Slider. You can check it’s code with Inspect Element. They have developed some custom script I guess to display “more products from the same collection”.

    Thanks in advance!

  9. Magento does some weird shit when I put requirejs-config.js inside app/design/frontend/_YOUR_VENDOR_/_YOUR_THEME_/web/ (it replaces the file content with generated code) so I recommend putting it at the root of your theme app/design/frontend/_YOUR_VENDOR_/_YOUR_THEME_/.

    Thanks for this simple tutorial =)

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>.

Tell us about your project

Drop us a line. We'd love to know more about your project.