如何统计Slick Slider缩略图数量并动态调整centerMode配置

核心实现逻辑为：先统计缩略图总数，再根据数量动态传入配置参数即可，完整修改后的代码如下：

/** Project Slider **/
$('.single-project-slider-wrraper').slick({
    rtl: true,
    slidesToShow: 1,
    slidesToScroll: 1,
    arrows: false,
    fade: true,
    asNavFor: '.single-project-nav-wrraper'
});

// 先获取缩略图总数量
const navSlideCount = $('.single-project-nav-wrraper').children().length;
// 动态生成缩略图轮播配置
const navSlickConfig = {
    rtl: true,
    slidesToShow: 5,
    slidesToScroll: 1,
    asNavFor: '.single-project-slider-wrraper',
    dots: false,
    focusOnSelect: true,
    // 根据数量判断配置参数
    centerMode: navSlideCount > 5,
    infinite: navSlideCount > 5,
    arrows: navSlideCount > 5
};
$('.single-project-nav-wrraper').slick(navSlickConfig);

再补充以下CSS样式，确保缩略图数量≤5时整体居中对齐：

.single-project-nav-wrraper .slick-track {
    margin: 0 auto;
}

改动说明 #

• 通过children().length统计当前缩略图的实际总数，避免硬编码判断
• 当缩略图数量≤5时，自动关闭centerMode、infinite和滑动箭头，不会出现多余的交互控件
• 新增的CSS规则让不足5张的缩略图滑块自动居中，符合布局要求

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