Adding slides to Slick with ajax-CodePudding

so I'm using Slick Carousel and I'm showing in it a list of products from my database limited to 24 for performance reasons. But I need to show all of them, so I made a afterChange function that ajax loads another 24 products everytime the user is 2 slides before the end and add them with slickAdd function to the end of the Slick.

Everything is working fine but when the slickAdd function executes, the slides width changes for some reason from 457px to 451px and I can see a part of the 4th slide on the current slide.(I have 3 shown) Then if I click on the next button again, the width goes back to 457px and everything is ok.

    $('.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 ><div ><div ><div ><div ><img draggable="false" id="produkt-img" src="img/konfigurator/' komponent '/'   data_parser[i].produkt   '/1.jpg" alt="" /></div><div >'   data_parser[i].cena   ' €</div></div><div ><div ><span >'   produkt_nazov   '</span><span ><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 ><div ><a >Detail</a><a >Vybrať</a></div></div></div></div></div></div></div>';
                        }

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

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

What could be causing this and how to prevent it?

CodePudding user response：

This fixed it for me

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