Adding slides to Slick with ajax - html

Question

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 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 be causing this and how to prevent it?

Answer 1

This fixed it for me
$(".demo")[0].slick.setPosition();