Tambahkan tayangan slaid ke Slick menggunakan ajax

Question

Jadi saya menggunakan Slick Carousel dan di dalamnya saya memaparkan senarai produk dari pangkalan data yang terhad kepada 24 atas sebab prestasi. Tetapi saya perlu menunjukkan kesemuanya, jadi saya mencipta fungsi afterChange dan setiap kali pengguna mempunyai 2 slaid sebelum tamat, ajax memuatkan 24 produk lain dan menambahkannya ke penghujung Slick menggunakan fungsi slickAdd.

Semuanya berfungsi dengan baik, tetapi apabila fungsi slickAdd dijalankan, lebar slaid berubah daripada 457px kepada 451px atas sebab tertentu dan saya dapat melihat sebahagian daripada slaid keempat pada slaid semasa. (Saya menunjukkan 3) Kemudian jika saya mengklik butang seterusnya sekali lagi, lebarnya kembali kepada 457px dan semuanya berfungsi dengan baik.

$('.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');
                }
            });
        }
    });
});

Apakah yang boleh menyebabkan ini dan bagaimana untuk mencegahnya?

Answer 1

Ini menyelesaikan masalah untuk saya

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