How to implement slick slider in Magento

first of all, we need to add slick.js, slick-theme.min.css, slick.min.css in the CSS and js folders of Magento _ui respectively. Then create a custom js file and add the following js code for now I named it sliders.js

define([
    'jquery',
    'slick'
],function ($, slick){
    $(document).ready(function(){
        $('.marquee').slick({
            infinite: true,
            slidesToShow: 3,
            slidesToScroll: 3,
            responsive: [
                {
                    breakpoint: 1281,
                    settings: {
                        slidesToShow: 3,
                        slidesToScroll: 3,
                    }
                },
                {
                    breakpoint: 813,
                    settings: {
                        slidesToShow: 2,
                        slidesToScroll: 3,
                    }
                },
                {
                    breakpoint: 824,
                    settings: {
                        slidesToShow: 2,
                        slidesToScroll: 3,
                    }
                },

                {
                    breakpoint: 1201,
                    settings: {
                        slidesToShow: 3,
                        slidesToScroll: 4,
                    }
                },
                {
                    breakpoint: 1024,
                    settings: {
                        slidesToShow: 3,
                        slidesToScroll: 4,
                    }
                },
                {
                    breakpoint: 769,
                    settings: {
                        slidesToShow: 2,
                        slidesToScroll: 3,
                    }
                },
                {
                    breakpoint: 576,
                    settings: {
                        slidesToShow: 1,
                        slidesToScroll: 1,
                    }
                },
                {
                    breakpoint: 375,
                    settings: {
                        slidesToShow: 1,
                        slidesToScroll: 1,
                    }
                }
            ]
        });
    });
});
we also need to add the following code in the magento_ui/layout/default_head_block section

Leave a comment

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