Add slideshow to Slick using ajax

Question

So I use Slick Carousel and in it I display a list of products from the database which is limited to 24 for performance reasons. But I need to show all of them, so I created an afterChange function and every time the user has 2 slides before the end, ajax loads another 24 products and adds them to the end of the Slick using the slickAdd function.

Everything works fine, but when the slickAdd function executes, the slide width changes from 457px to 451px for some reason and I can see part of the fourth slide on the current slide. (I'm showing 3) Then if I click the next button again, the width goes back to 457px and everything works fine.

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

What could cause this and how to prevent it?

Answer 1

This solved the problem for me

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