Refresh slide when contents dynamically changed

[zhujy8833]

Hi,

I'm using this addon to display a card list. Right now I have a polling service to pull the new card list from api every other hour. I can see from slick repo, there is a similar issue: https://github.com/kenwheeler/slick/issues/1191, basically it needs to destroy the slick and re-initialize again.

Could we support this feature?

[laantorchaweb]

Absolutely, I see this being and issue when transitioning from similar dynamic routes. Do you have any other example on when it's failing?

[melv-n]

You can call Ember.$('.slick-slider').slick('refresh') to refresh the slides.

Don't do this while sliding, though. If a user is dragging your slides while calling refresh, some wonky behaviour occurs (it resets back to position before drag).

[gzurbach]

Experiencing this as well in my own implementation. Could someone provide a pointer on how to address this issue?

I tried the following:

export default Component.extend({
  setup() {
    this.$().slick();
  },

  destroy() {
    this.$().slick('unslick');
  },

  didRender() {
    this._super(...arguments);
    this.setup();
  },

  didUpdateAttrs() {
    this._super(...arguments);
    this.destroy();
  },

  willDestroyElement() {
    this.destroy();
    this._super(...arguments);
  }
});

But when the list of items refreshes asynchronously — transitioning from /route/123 to /route/456 for instance — didUpdateAttrs is called and unslick happens... unfortunately Ember crashes with:

NotFoundError: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node.

After that didRender is never called and the new slides never load. If you managed to solve this issue I would appreciate some guidance, thanks!

[manny-grewal]

Experiencing this as well in my own implementation. Could someone provide a pointer on how to address this issue?

I tried the following:

export default Component.extend({
  setup() {
    this.$().slick();
  },

  destroy() {
    this.$().slick('unslick');
  },

  didRender() {
    this._super(...arguments);
    this.setup();
  },

  didUpdateAttrs() {
    this._super(...arguments);
    this.destroy();
  },

  willDestroyElement() {
    this.destroy();
    this._super(...arguments);
  }
});

But when the list of items refreshes asynchronously — transitioning from /route/123 to /route/456 for instance — didUpdateAttrs is called and unslick happens... unfortunately Ember crashes with:

NotFoundError: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node.

After that didRender is never called and the new slides never load. If you managed to solve this issue I would appreciate some guidance, thanks!

I am having this issue too, have you had any luck fixing it?

[gzurbach]

@manny-grewal I did, I switched to Swiper 😄

[manny-grewal]

@manny-grewal I did, I switched to Swiper 😄

Thanks, works for me!