如何在Slick Carousel中让幻灯片数量≤2时居中显示？

当幻灯片数量≤2时，单个slide能正常居中，但两个slide会出现靠右对齐的问题，可通过以下两种方案实现需求：

方案一：结合JS配置与CSS调整 #

1. 优化JS初始化逻辑 #

修改轮播初始化代码，当slide数量≤2时，动态设置slidesToShow为实际slide数量，并计算对称的centerPadding确保整体居中：

$(function() {
    $('.js-addons-builder-slick').each(function() {
        let slider = $(this);
        let slideCount = slider.children('.items').length;
        const slideWidth = 340; // 单个slide的设定宽度
        const slideMargin = 20; // slide左右margin总和

        let slickOptions = {
            slidesToShow: 1,
            slidesToScroll: 1,
            autoplay: false,
            dots: true,
            infinite: false,
            arrows: true,
            centerPadding: '0px',
            variableWidth: true,
            touchThreshold: 100,
            rows: 0,
            responsive: [{
                breakpoint: 768,
                settings: {
                    draggable: true,
                    variableWidth: true,
                    dots: true,
                    arrows: true,
                    infinite: false,
                }
            }]
        };

        if (slideCount <= 2 ) {
            slickOptions.centerMode = true;
            slickOptions.slidesToShow = slideCount;
            // 计算左右对称的padding，让slide组在容器中居中
            const totalSlideWidth = slideWidth * slideCount + slideMargin * (slideCount - 1);
            slickOptions.centerPadding = `calc((100% - ${totalSlideWidth}px)/2)`;
        } else {
            slickOptions.centerMode = false;
        }

        slider.slick(slickOptions);
    });
});

2. 补充CSS确保轨道居中 #

添加CSS强制slick轨道在centerMode开启时居中对齐：

.slick-center .slick-track {
    display: flex;
    justify-content: center;
    float: none;
    margin: 0 auto;
}

方案二：纯CSS快速修复 #

如果不想修改JS核心逻辑，可通过标识类+CSS强制居中：

1. JS添加标识类 #

在初始化前给slide数量≤2的轮播容器添加专属类：

$(function() {
    $('.js-addons-builder-slick').each(function() {
        let slider = $(this);
        let slideCount = slider.children('.items').length;
        if (slideCount <=2 ) {
            slider.addClass('small-slide-set');
        }

        // 原有的slick初始化代码保持不变
        let slickOptions = {
            slidesToShow: 1,
            slidesToScroll: 1,
            autoplay: false,
            dots: true,
            infinite: false,
            arrows: true,
            centerPadding: '0px',
            variableWidth: true,
            touchThreshold: 100,
            rows: 0,
            responsive: [{
                breakpoint: 768,
                settings: {
                    draggable: true,
                    variableWidth: true,
                    dots: true,
                    arrows: true,
                    infinite: false,
                }
            }]
        };

        if (slideCount <=2 ) {
            slickOptions.centerMode = true;
        } else {
            slickOptions.centerMode = false;
        }

        slider.slick(slickOptions);
    });
});

2. 对应CSS样式 #

.small-slide-set .slick-track {
    display: flex;
    justify-content: center;
    width: 100% !important;
}

.small-slide-set .slick-slide {
    float: none;
}

两种方案均可实现slide数量≤2时的居中效果，方案一更贴合Slick原生配置逻辑，方案二更适合快速调整现有代码。

内容的提问来源于stack exchange，提问作者clarkf