slick doesn't refresh when changing content dynamically

[JcDenton86]

Hi,
I' ve been trying to refresh slick carousel every time the content I get from the server changes, but every time it breaks slick (new images are shown in a list instead of carousel). The first time I load the images it works, but when I refresh the content (i.e change all the images) then it breaks. Is there a proper way of refreshing the slider or making it aware of the new content?
The call to the slider happens when the Ajax request is successfully complete and the response has the images.
Thanks in advance

[leggomuhgreggo]

Hey, it's super helpful if you can provide a fiddle when reporting issues like this--I know it's a little harder with an ajax request scenario, but, anyhow--I don't know if this translates one-to-one but I whipped this up where it just set a delay on a function the removes and adds different images and it seems to work.

I'm just guessing, but is it possible that the images are the actual slide? Because that might mess things up, if they arent wrapped in a parent container.

[simeydotme]

@JcDenton86 You need to .slick("unslick"); then add your content, then .slick({ opts }) again.... or use .slick("slickRemove") to remove all the slides you want to replace, and then .slick("slickAdd") to add the new ones. Help is on the readme.md

[Vitalii1904]

This is not working for vertical mode, wrong calculation of height

[Anujndls]

I had also tried but adding another images in slick-item its going wrong no slider only list of images.
I am using AngularJs and Slick please help me.

[hadiamiri]

@Anujndls Hi, did you find a solution for this problem?

[revinfotech2]

reinit the slick again , after getting the data succesfully or changing content dynamically
$('.slider').slick('reinit');

[Deepali-tecowiz]

@Anujndls
Has it worked for you? i had faced similar issue. Using angular's old version i.e. 1.4 and using slider carousel. On refresh/page reload carousel was not getting refreshed with latest data.

$('.slider').slick('reinit'); or $('.slider').slick('refresh'); did not work me so I had to play with data coming from server into angular client.

Did fix that with no so great solution but it worked for me.
What I observed is that, the array which is used to iterate and display elements in it on the carousel do not work if its reference changes on page reload. If you directly do not assign data array to the target array whose elements are being shown on Carousel then it works.
For that, I am using array's Push() method

for (let i=0; i < data.length ; i++) {
var id = vm.targetArray.length + 1;
if ( vm.targetArray.filter(item=> item.name == data[i].name).length == 0){
vm.targetArray.push(data[i]);
console.log("Pushed the item to targetArray : " + data[i].name);
}
}

[JomalJohny]

@simeydotme
Thanks for the valuable information about the slick slider initilaisation