currentSlide property not working until given a manually-done page resize about ember-cli-swiper

[Suven]

Nope, it should just work. You can have a look at the demo for a quick reference:

https://github.com/Suven/ember-cli-swiper/blob/master/tests/dummy/app/controllers/index.js
https://github.com/Suven/ember-cli-swiper/blob/master/tests/dummy/app/templates/index.hbs

Which Ember-Version are you using?

[djsegal]

v2.0.2

I found one way to make it work. If you resize the page, you can get slideTo buttons to work.

Maybe it's a race condition and you could fire the refresh command after some event.

[Suven]

Hm okay.. I did not experience this yet and will look into that.

Just an idea: not updating the currentSlide before the slider is really initialized / rendered might also help. For cases where I did not only watch that value, but also set an initial one after transitioning to the route containing it, I would always set that value in setupController with an Ember.run.later and a timing of 100 or so.. I did this just because I wanted the user to see the animation, but maybe this was also my way of unknowingly working around this issue too

[djsegal]

• not updating the currentSlide before the slider is really initialized / rendered might also help
  • I was using a button that switched the value of currentSlide, so I don't thing this could be the issue

What code gets run after a resize?

[djsegal]

I think it's because it's in a modal that starts off hidden. I just put it on the page and it worked fine.

Is there something I should be triggering when the modal gets opened for the first time?

[Suven]

Ah. I see. How is the modal hidden?

You could try triggering an update via updateFor. Just set it to a property that changes after the modal is shown.. Although updateFor is ment to be binded to a list or smth to update the slider whenever you add/remove data, it might also help in this case.

Could you provide some code / a minimal example of where things break? If its the modal itself breaking stuff, I would like to close this issue.

[djsegal]

@Suven

• The modal is hidden with bootstrap
• I don't know how to minimally setup the example and don't know how to run the test suite
• The solution in PR #3 is to use the boolean value didSlide in:
  var didSlide = this.get('swiper').slideTo(index);
  to attempt a refresh once and in most cases fix modal

[Suven]

Hey,

yup.. I saw that PR. Thanks for that! I will look further into it but as that code seems like a big work-around for something which might be a problem in bootstrap or swiper itself, I'd rather not merge that without further investigation.

The failing tests are caused by how I injected swiper when running the tests, I'll fix that first and than take a look at your problem.

What exactly do you mean by "in most cases fix modal" ? :D

[djsegal]

I just assumed that this.get('swiper').slideTo(index) was pretty reliable in catching swiping errors and that a hard refresh would fix most of them

[Suven]

Yes it is, but it add's a lot of boilerplate-code that should not even be needed in the first place. Also the code makes the assumption that a 'failure' can only occur once (which makes sense for the modal).

I thought about this problem and created an additional function forceUpdate via #4.

I'll update the online-docs later, but feel free to tell me if this does or does not solve your issue..

I'm closing this for the time being

[djsegal]

@Suven, the solution you provided worked as expected:

• template

{{#swiper-container registerAs=superDuperSwiper}}
  ...
{{/swiper-container}}

• controller

foo() {
  this.get('superDuperSwiper').forceUpdate();
}

---

I added to following tweak to make it work in my case (activate swiper on first modal slider-button click):

export default Ember.Component.extend({

  ...

  currentSlide: 0,
  isActive: false,

  setNewSlide: function(relativePosition) {
    if ( !this.get('isActive') ) { this.get('superDuperSwiper').forceUpdate(); }
    var currentSlide = this.get('currentSlide');
    currentSlide += relativePosition;
    this.set('currentSlide', currentSlide);
  },

  actions: {
    nextSlide() {
      this.setNewSlide(+1);
    },

    prevSlide() {
      this.setNewSlide(-1);
    }
  }

  ...

});

// note: i haven't added max and min slider limits to this solution