Slick Carousel Ajax添加幻灯片后宽度异常问题排查

问题描述 #

用Slick Carousel展示数据库产品列表，初始加载24个产品保障性能，通过afterChange事件实现滚动到倒数第2组时Ajax加载下24个产品，用slickAdd添加到轮播末尾。功能正常，但添加后幻灯片宽度从457px变为451px，当前视图会露出第4张幻灯片（设置显示3张），点击下一页按钮后宽度恢复正常。

代码示例 #

$('.demo').slick({
    slidesToShow: 3,
    slidesToScroll: 3,
    infinite: false,
});

$('.demo').on('afterChange', function(event, slick, currentSlide, nextSlide){

    var komponent = $(" .komponent-container.active").attr("id");

    var loadWhen = currentSlide+6;

    if(loadWhen == slick.slideCount){
        console.log("loadmore");
        $.ajax({
            type: "POST",
            url: "/project/public/konfigurator",
            data: {id: komponent, from_column: slick.slideCount, requestid: "load_more"},
            dataType: "json",

            success: function (data) {

                var data_parser = JSON.parse(data)[0];

                if (data_parser.length > 0) {

                    var html = '';
                    for (i = 0; i < data_parser.length; i++) {
                        var produkt_nazov = 0;
                        if (data_parser[i].produkt.length > 45) {
                            produkt_nazov = data_parser[i].produkt.substring(0, 45) + "...";
                        } else {
                            produkt_nazov = data_parser[i].produkt;
                        }

                        html += '<div><div class="item-container"><div class="container-wrapper"><div class="produkt-container"><div class="item-left"><div class="item-image-wrapper"><img draggable="false" id="produkt-img" src="img/konfigurator/'+komponent+'/' + data_parser[i].produkt + '/1.jpg" alt="" /></div><div class="cena">' + data_parser[i].cena + ' €</div></div><div class="item-right"><div class="item-info"><span class="item-title">' + produkt_nazov + '</span><span class="item-description"><span>Výrobca čipu - ' + data_parser[i].vyrobca_cipu + '</span><span>Veľkosť pamäte - ' + data_parser[i].vram_size + '</span><span>Typ pamäte - ' + data_parser[i].vram_type + '</span><span>Frekvencia jadra - ' + data_parser[i].gpu_memory_clockrate + '</span></span></div><div class="spodna-cast"><div class="action-buttons"><a class="detail-button">Detail</a><a class="add-button">Vybrať</a></div></div></div></div></div></div></div>';
                    }

                    $(" .demo").slick('slickAdd', html);
                    console.log("add");
                }
            },

            error: function (result) {
                alert('error');
            }
        });
    }
});

问题成因 #

1. Slick Carousel在动态添加幻灯片后，不会自动触发重新计算布局的逻辑。初始幻灯片宽度是基于加载时的总数量计算的，新增幻灯片后总数变化，但内部的宽度计算没有同步更新，导致出现偏差。
2. 点击分页按钮时，Slick会触发内部的重绘流程，重新计算所有幻灯片的宽度和位置，所以此时宽度能恢复正常。

解决方法 #

方法1：添加幻灯片后手动触发刷新 #

在调用slickAdd完成后，立即调用Slick的refresh方法，强制重新计算布局：

$(" .demo").slick('slickAdd', html);
// 新增刷新逻辑，强制重新计算布局
$(" .demo").slick('refresh');
console.log("add");

方法2：优化加载时机的判断逻辑 #

当前的loadWhen = currentSlide+6判断容易在临界状态触发添加，可能干扰布局计算。可以调整为剩余幻灯片数量小于等于单页展示数的2倍时触发加载：

// 替换原有的loadWhen判断逻辑
var remainingSlides = slick.slideCount - (currentSlide + slick.options.slidesToShow);
if(remainingSlides <= slick.options.slidesToShow){
    // 执行Ajax加载逻辑
}

方法3：验证新增HTML结构一致性 #

确保通过Ajax生成的幻灯片HTML结构和初始加载的完全一致，避免DOM结构（比如多余空格、标签嵌套错误）差异导致Slick计算宽度时出现偏差。

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