Updating slides after init

[botoxparty]

Hey,

I'm trying to swap out the slides data after the slick-carousel has been initialised.

Basically my steps are as follows.

1. Receive data
2. unslick() the slider
3. Clear my slides [] array
4. Regenerate my slides [] using the new data
5. initSlick(slideConfig) re init the slider

This only seems to work on the first time I change the data, any changes after will not the remove the previous slides from the slider, even though the slides [] array has been cleared and populated with new data.

And then it doesn't seem to be reinitialising properly. If i manually trigger the initSlick() function with a click event it inits properly but yeah the data still is not refreshed.

[botoxparty]

So it seems like a problem with Angular not being able to destroy and rebuild the slider fast enough, I added a 5ms delay before the re-init and it works now.

[leo6104]

Thank you for detail explanation. I modified unslick() function as you said. https://github.com/leo6104/ngx-slick-carousel/commit/9c421d6aa27930d1cb9c1723ace246f8cbee68aa Can you check 0.4.3 version?

Actually, you don't need to call initSlick(slideConfig) and unslick() manually. 1. change slides variable with new array 2. assign new slideConfig object to [config] input

SlickCarouselComponent ngOnChanges function will detect your new config and change the option via https://github.com/leo6104/ngx-slick-carousel/commit/9c421d6aa27930d1cb9c1723ace246f8cbee68aa#diff-da1493f353055c910b70b07be579bb7eR218 line

[botoxparty]

Hmm,

Still doesn't work for me, the real problem seems to happen when the original slide items are removed. Adding items to the array there is no problem, but removing the previous items causes problems. I have tried adding the new ones THEN removing the old ones, and also clearing the old array and then adding the new ones. Same problem.

Sometimes it will put some items into the slider, but not all.

Would you be able to show a snippet of some code where you replace all of the items in the slider array?

Also After updating to 0.4.3 any time i try to navigate away from a page that has a slick-slider on it i get this error. I'm assuming it has something to with unslicking on destroy?

`  Error: Uncaught (in promise): SyntaxError: Invalid regular expression: /(^|.)slick.(?:..|)slick-0(.|$)/: Stack overflow SyntaxError: Invalid regular expression: /(^|.)slick.(?:..|)slick-0(.|$)/: Stack overflow

at Object.remove (jquery.min.js:2)
at jquery.min.js:2
at Function.each (jquery.min.js:2)
at w.fn.init.each (jquery.min.js:2)
at w.fn.init.off (jquery.min.js:2)
at Object.e.cleanUpEvents (slick.min.js:1)
at Object.e.destroy (slick.min.js:1)
at Object.e.unslick (slick.min.js:1)
at w.fn.init.i.fn.slick (slick.min.js:1)
at ngx-slick-carousel.js:246
at Object.remove (jquery.min.js:2)
at jquery.min.js:2
at Function.each (jquery.min.js:2)
at w.fn.init.each (jquery.min.js:2)
at w.fn.init.off (jquery.min.js:2)
at Object.e.cleanUpEvents (slick.min.js:1)
at Object.e.destroy (slick.min.js:1)
at Object.e.unslick (slick.min.js:1)
at w.fn.init.i.fn.slick (slick.min.js:1)
at ngx-slick-carousel.js:246
at resolvePromise (zone.js:814)
at resolvePromise (zone.js:771)
at zone.js:873
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421)
at Object.onInvokeTask (core.js:3811)
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:420)
at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:188)
at drainMicroTaskQueue (zone.js:595)
at ZoneTask.push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask [as invoke] (zone.js:500)
at invokeTask (zone.js:1540)

`

[botoxparty]

Hmm any ideas @leo6104 ?

[calleufuzi]

I have the same problem , can you help us pls? @leo6104

[botoxparty]

I ended up fixing this, i think I am unslicking them and then they are reinitialising themselves.

post your code up.

[calleufuzi]

I ended up fixing this, i think I am unslicking them and then they are reinitialising themselves.

post your code up.

You just unslick the slider? No needed to initSlick again?

[botoxparty]

Yes exactly.

Think about when the slider is first initialised, you don't have to initialise it.

My process is:

Unslick the slider, Clear the slides array, Push the new array Slider automatically re-inits

Let me know if you still have problems.

[calleufuzi]

I tried this, but not work for me =(. In my case , i have a list component and when a click on the item of this list I trigger modal with this Carousel inside. In this open trigger I push the new array, like this.

my modal component with slider component inside.

App selfie component with carousel directive

and after close I unslick the slider and clean the Slides array.

In the first open trigger this work for me, but if I close one time, Slider don't init again...

Im doing wrong?

[botoxparty]

Okay firstly you should copy and paste the code not take screenshots.

You need to unslick on open not on close, and only if it's been opened before. And also clear the array AFTER unslicking, not before. You will need to declare a variable to track whether its been open or not, so it should look something like this.

// variables
fresh = true;

openSlick(id: string) {

// has it been opened before?
  if(this.fresh === false) {
slick.unslick();
slick.slides = [];
}

// Populate your slides array
slick.slides = getImagesForSlick(id);

// say its been opened before
this.fresh = false;

this.modal.open();

}

closeSlick(id: string) {
   
  this.modal.close()

}

[calleufuzi]

@botoxparty Ty for helping! im my case I don't need to unslick and reset the slider, I'm just for each modal that i opened I give the slides image that I want in these case.

[betojsx]

Edit I thought my issue was solved but actually not. Many thanks anyaway

~So many thanks @botoxparty this fixed my issue here.~

Unslick the slider, Clear the slides array, Push the new array Slider automatically re-inits

[botoxparty]

@betodasilva check this other post I made on a similar issue:

https://github.com/leo6104/ngx-slick-carousel/issues/21

[betojsx]

I saw that too, @botoxparty. Thanks for supporting.

Actually what I did was make use of removeSlide method and do a refresh after that.

Code below:

this.slick.removeSlide( slideRef );
this.slick.$instance.slick('refresh');

[minivetsystem]

sorry for the late reply, i was also having same issue, but got fixed by using trackBy . here is the reference mention by IMPORTANT https://www.npmjs.com/package/ngx-slick-carousel

[Wuffle1125]

shit ngx-slick-carousel, it's very stressful to use it