magento slick.js使用

增加slick.js边距
.slick-list {
    margin: 0 -20px;
 }
.slick-slide {
    margin: 0 20px;
 }

phtml中使用slick.js


            

            

            

            

            

            

            

            

            

            

            

            




    require([
        'jquery',
        'jquery/ui',
        'slick'
    ], function ($) {
        jQuery(document).ready(function () {
            jQuery(".slick-slider").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
                        }
                    }
                ]
            });
        });
    });