使用 ajax 將幻燈片新增至 Slick

Question

因此，我使用 Slick Carousel，並在其中顯示資料庫中的產品列表，出於效能原因，該列表限制為 24 個。但我需要顯示所有這些，所以我創建了一個 afterChange 函數，每次用戶在結束前有 2 張幻燈片時，ajax 都會加載另外 24 個產品，並使用 slickAdd 函數將它們添加到 Slick 的末尾。

一切工作正常，但是當 slickAdd 函數執行時，幻燈片寬度由於某種原因從 457px 更改為 451px，我可以在當前投影片上看到第四張投影片的一部分。 （我顯示了 3 張）然後如果我單擊再次點擊下一個按鈕，寬度回到 457px，一切正常。

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

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

        var komponent = $(".kom​​ponent-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><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 '</smm; pamäte - ' data_parser[i].vram_type '</span><span>Frekvencia jadra - ' data_parser[i].gpu_memory_clockrate '</span></span&pu_memory_clockrate '</span></span÷>;<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');
                }
            });
        }
    });
});

什麼可能導致這種情況以及如何預防？

Answer 1

這為我解決了這個問題

$(".demo")[0].slick.setPosition();